From 9fcc7cc8480d5e45d1669ce3449791adae08a710 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 19 Feb 2024 09:12:35 +0300
Subject: [PATCH 01/36] Fixed #5297 - DataTable: tableClass prop specifies
 String type, though Array also works

---
 components/lib/datatable/BaseDataTable.vue | 8 ++++----
 components/lib/datatable/DataTable.d.ts    | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
index 8bdf78646..bc565808f 100644
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/components/lib/datatable/BaseDataTable.vue
@@ -211,11 +211,11 @@ export default {
             default: null
         },
         rowClass: {
-            type: null,
+            type: [String, Object],
             default: null
         },
         rowStyle: {
-            type: null,
+            type: Object,
             default: null
         },
         scrollable: {
@@ -263,11 +263,11 @@ export default {
             default: null
         },
         tableClass: {
-            type: String,
+            type: [String, Object],
             default: null
         },
         tableProps: {
-            type: null,
+            type: Object,
             default: null
         },
         filterInputProps: {
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 6c4e36b43..f26a35833 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -1117,11 +1117,11 @@ export interface DataTableProps {
     /**
      * Inline style of the table element.
      */
-    tableStyle?: any;
+    tableStyle?: object | undefined;
     /**
      * Style class of the table element.
      */
-    tableClass?: any;
+    tableClass?: string | object | undefined;
     /**
      * Used to pass all properties of the TableHTMLAttributes to table element inside the component.
      */

From 4cefb906e93720dcfa102f3a84c01c9175580d8c Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Mon, 19 Feb 2024 06:16:16 +0000
Subject: [PATCH 02/36] Update API doc

---
 doc/common/apidoc/index.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 4aaa0b8e2..284a6bbaf 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -20321,7 +20321,7 @@
                             "name": "tableStyle",
                             "optional": true,
                             "readonly": false,
-                            "type": "any",
+                            "type": "object",
                             "default": "",
                             "description": "Inline style of the table element."
                         },
@@ -20329,7 +20329,7 @@
                             "name": "tableClass",
                             "optional": true,
                             "readonly": false,
-                            "type": "any",
+                            "type": "string | object",
                             "default": "",
                             "description": "Style class of the table element."
                         },

From 3a0b1918c4efe3a764cf8307cf45eae1f325dd14 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 19 Feb 2024 11:59:43 +0300
Subject: [PATCH 03/36] Fixed #4906 - Listbox: issue with navigating through
 list items using tab and enter buttons

---
 components/lib/listbox/Listbox.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 5f6ea7447..97b62dc2a 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -500,8 +500,6 @@ export default {
                 if (this.multiple && event.shiftKey) this.onOptionSelectRange(event, this.focusedOptionIndex);
                 else this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
             }
-
-            event.preventDefault();
         },
         onSpaceKey(event) {
             this.onEnterKey(event);

From 3d99836b47330eda9bf974238d922f3a8e081252 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 19 Feb 2024 12:45:00 +0300
Subject: [PATCH 04/36] Fixed #5260 - Upload: Error showing when all the files
 are removed.

---
 components/lib/fileupload/FileUpload.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/lib/fileupload/FileUpload.vue b/components/lib/fileupload/FileUpload.vue
index 1f64095e4..b41489311 100755
--- a/components/lib/fileupload/FileUpload.vue
+++ b/components/lib/fileupload/FileUpload.vue
@@ -27,9 +27,11 @@
         </div>
         <div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
-                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
-                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
-                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
+                <template v-if="hasFiles">
+                    <FileUploadProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
+                    <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
+                    <FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
+                </template>
                 <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
             </slot>
             <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" :class="cx('empty')" v-bind="ptm('empty')">

From f7678f0bd3a9d37e41affad414c11f1dd651b1a5 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 19 Feb 2024 16:26:49 +0300
Subject: [PATCH 05/36] Fixed #5279 - Galleria animation defect

---
 components/lib/galleria/GalleriaThumbnails.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/lib/galleria/GalleriaThumbnails.vue b/components/lib/galleria/GalleriaThumbnails.vue
index cd545db52..31be59673 100755
--- a/components/lib/galleria/GalleriaThumbnails.vue
+++ b/components/lib/galleria/GalleriaThumbnails.vue
@@ -15,7 +15,16 @@
                 <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
             </button>
             <div :class="cx('thumbnailItemsContainer')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
-                <div ref="itemsContainer" :class="cx('thumbnailItems')" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)" v-bind="ptm('thumbnailItems')">
+                <div
+                    ref="itemsContainer"
+                    :class="cx('thumbnailItems')"
+                    role="tablist"
+                    @transitionend="onTransitionEnd($event)"
+                    @touchstart="onTouchStart($event)"
+                    @touchmove="onTouchMove($event)"
+                    @touchend="onTouchEnd($event)"
+                    v-bind="ptm('thumbnailItems')"
+                >
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
@@ -381,8 +390,8 @@ export default {
             indicators[nextInd].children[0].tabIndex = '0';
             indicators[nextInd].children[0].focus();
         },
-        onTransitionEnd() {
-            if (this.$refs.itemsContainer) {
+        onTransitionEnd(e) {
+            if (this.$refs.itemsContainer && e.propertyName === 'transform') {
                 document.body.setAttribute('data-p-items-hidden', 'true');
                 !this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
                 this.$refs.itemsContainer.style.transition = '';

From be832fe5ccf035ad2c8f0e4eadce525176389497 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 09:31:29 +0300
Subject: [PATCH 06/36] ColorPicker content class fixes

---
 components/lib/colorpicker/ColorPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue
index 3a4fcebdd..2d0156627 100755
--- a/components/lib/colorpicker/ColorPicker.vue
+++ b/components/lib/colorpicker/ColorPicker.vue
@@ -4,7 +4,7 @@
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
-                    <div :class="cx('panel')" v-bind="ptm('content')">
+                    <div :class="cx('content')" v-bind="ptm('content')">
                         <div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
                             <div :class="cx('color')" v-bind="ptm('color')">
                                 <div :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>

From 2a785c2420aee4f5271ef608a3fd52da87fa2c95 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 09:53:51 +0300
Subject: [PATCH 07/36] Fixed #5311 - InputSwitch: Aura invalid state updates

---
 public/themes/aura-dark-amber/theme.css   | 6 ++++++
 public/themes/aura-dark-blue/theme.css    | 6 ++++++
 public/themes/aura-dark-cyan/theme.css    | 6 ++++++
 public/themes/aura-dark-green/theme.css   | 6 ++++++
 public/themes/aura-dark-indigo/theme.css  | 6 ++++++
 public/themes/aura-dark-lime/theme.css    | 6 ++++++
 public/themes/aura-dark-noir/theme.css    | 6 ++++++
 public/themes/aura-dark-pink/theme.css    | 6 ++++++
 public/themes/aura-dark-purple/theme.css  | 6 ++++++
 public/themes/aura-dark-teal/theme.css    | 6 ++++++
 public/themes/aura-light-amber/theme.css  | 6 ++++++
 public/themes/aura-light-blue/theme.css   | 6 ++++++
 public/themes/aura-light-cyan/theme.css   | 6 ++++++
 public/themes/aura-light-green/theme.css  | 6 ++++++
 public/themes/aura-light-indigo/theme.css | 6 ++++++
 public/themes/aura-light-lime/theme.css   | 6 ++++++
 public/themes/aura-light-noir/theme.css   | 6 ++++++
 public/themes/aura-light-pink/theme.css   | 6 ++++++
 public/themes/aura-light-purple/theme.css | 6 ++++++
 public/themes/aura-light-teal/theme.css   | 6 ++++++
 20 files changed, 120 insertions(+)

diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index ab341638b..8cf644ac1 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index 56ee81de2..4efb18f52 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index d0285c7c5..86532beda 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index 64b323e35..52e6faad1 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index c7c0f0d58..d6da905ae 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index fb2ae1ff1..fd5acc100 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index 6f256b83a..9a59198b3 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index ae61ade53..c6cd72169 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 4128071a0..452b3e382 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index f4cc47ec3..42f26b0a9 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -11292,6 +11292,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #fca5a5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #18181b;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index 98fac38f9..e78a79226 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index f6a61de35..f4a5c07b3 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index 4044bb260..ee4e978ef 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index c5b582b39..aa07961a1 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index d31a6b733..149e8ddb0 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index fc6d32518..677d4a054 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index c3c161669..4e5d047d5 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -11301,6 +11301,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index 54a1abb91..5575832bd 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index 52287861f..7d2abf327 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index acfcfd9dd..961e1ab3c 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -11293,6 +11293,12 @@
     left: 1.25rem;
     transform: none;
   }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    background: #f87171;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider:before {
+    background: #ffffff;
+  }
 
   .p-inputtext {
     box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);

From 44e640bfb4b3127e9b3ca1306d61811434a912b4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 11:07:27 +0300
Subject: [PATCH 08/36] Remove pt demos

---
 doc/accordion/pt/PTDoc.vue         | 127 --------
 doc/accordion/pt/index.vue         |   6 -
 doc/autocomplete/pt/PTDoc.vue      | 109 -------
 doc/autocomplete/pt/index.vue      |   6 -
 doc/avatar/pt/PTDoc.vue            |  43 ---
 doc/avatar/pt/index.vue            |   6 -
 doc/badge/pt/PTDoc.vue             | 100 ------
 doc/badge/pt/index.vue             |   6 -
 doc/blockui/pt/PTDoc.vue           |  56 ----
 doc/blockui/pt/index.vue           |   6 -
 doc/breadcrumb/pt/PTDoc.vue        | 107 -------
 doc/breadcrumb/pt/index.vue        |   6 -
 doc/button/pt/PTDoc.vue            |  47 ---
 doc/button/pt/index.vue            |   6 -
 doc/calendar/pt/PTDoc.vue          |  88 ------
 doc/calendar/pt/index.vue          |   6 -
 doc/card/pt/PTDoc.vue              |  67 ----
 doc/card/pt/index.vue              |   6 -
 doc/carousel/pt/PTDoc.vue          | 299 ------------------
 doc/carousel/pt/index.vue          |   6 -
 doc/cascadeselect/pt/PTDoc.vue     | 314 -------------------
 doc/cascadeselect/pt/index.vue     |   6 -
 doc/chart/pt/PTDoc.vue             | 166 ----------
 doc/chart/pt/index.vue             |   6 -
 doc/checkbox/pt/PTDoc.vue          |  84 -----
 doc/checkbox/pt/index.vue          |   6 -
 doc/chip/pt/PTDoc.vue              |  59 ----
 doc/chip/pt/index.vue              |   6 -
 doc/chips/pt/PTDoc.vue             |  80 -----
 doc/chips/pt/index.vue             |   6 -
 doc/colorpicker/pt/PTDoc.vue       |  76 -----
 doc/colorpicker/pt/index.vue       |   6 -
 doc/confirmdialog/pt/PTDoc.vue     | 113 -------
 doc/confirmdialog/pt/index.vue     |   6 -
 doc/confirmpopup/pt/PTDoc.vue      | 120 --------
 doc/confirmpopup/pt/index.vue      |   6 -
 doc/contextmenu/pt/PTDoc.vue       | 471 -----------------------------
 doc/contextmenu/pt/index.vue       |   6 -
 doc/datatable/pt/PTDoc.vue         | 259 ----------------
 doc/datatable/pt/index.vue         |   6 -
 doc/dataview/pt/PTDoc.vue          | 417 -------------------------
 doc/dataview/pt/index.vue          |   6 -
 doc/dialog/pt/PTDoc.vue            | 103 -------
 doc/dialog/pt/index.vue            |   6 -
 doc/divider/pt/PTDoc.vue           |  83 -----
 doc/divider/pt/index.vue           |   6 -
 doc/dock/pt/PTDoc.vue              | 197 ------------
 doc/dock/pt/index.vue              |   6 -
 doc/dropdown/pt/PTDoc.vue          | 117 -------
 doc/dropdown/pt/index.vue          |   6 -
 doc/dynamicdialog/pt/PTDoc.vue     |  40 ---
 doc/dynamicdialog/pt/index.vue     |   6 -
 doc/editor/pt/PTDoc.vue            |  76 -----
 doc/editor/pt/index.vue            |   6 -
 doc/fieldset/pt/PTDoc.vue          |  76 -----
 doc/fieldset/pt/index.vue          |   6 -
 doc/fileupload/pt/PTDoc.vue        | 117 -------
 doc/fileupload/pt/index.vue        |   6 -
 doc/galleria/pt/PTDoc.vue          | 163 ----------
 doc/galleria/pt/index.vue          |   6 -
 doc/image/pt/PTDoc.vue             |  68 -----
 doc/image/pt/index.vue             |   6 -
 doc/inlinemessage/pt/PTDoc.vue     |  69 -----
 doc/inlinemessage/pt/index.vue     |   6 -
 doc/inplace/pt/PTDoc.vue           |  91 ------
 doc/inplace/pt/index.vue           |   6 -
 doc/inputmask/pt/PTDoc.vue         |  85 ------
 doc/inputmask/pt/index.vue         |   6 -
 doc/inputnumber/pt/PTDoc.vue       | 136 ---------
 doc/inputnumber/pt/index.vue       |   6 -
 doc/inputswitch/pt/PTDoc.vue       |  80 -----
 doc/inputswitch/pt/index.vue       |   6 -
 doc/inputtext/pt/PTDoc.vue         |  77 -----
 doc/inputtext/pt/index.vue         |   6 -
 doc/knob/pt/PTDoc.vue              |  72 -----
 doc/knob/pt/index.vue              |   6 -
 doc/listbox/pt/PTDoc.vue           | 113 -------
 doc/listbox/pt/index.vue           |   6 -
 doc/megamenu/pt/PTDoc.vue          | 425 --------------------------
 doc/megamenu/pt/index.vue          |   6 -
 doc/menu/pt/PTDoc.vue              | 193 ------------
 doc/menu/pt/index.vue              |   6 -
 doc/menubar/pt/PTDoc.vue           | 446 ---------------------------
 doc/menubar/pt/index.vue           |   6 -
 doc/message/pt/PTDoc.vue           |  65 ----
 doc/message/pt/index.vue           |   6 -
 doc/multiselect/pt/PTDoc.vue       | 121 --------
 doc/multiselect/pt/index.vue       |   6 -
 doc/orderlist/pt/PTDoc.vue         | 177 -----------
 doc/orderlist/pt/index.vue         |   6 -
 doc/organizationchart/pt/PTDoc.vue | 178 -----------
 doc/organizationchart/pt/index.vue |   6 -
 doc/overlaypanel/pt/PTDoc.vue      |  87 ------
 doc/overlaypanel/pt/index.vue      |   6 -
 doc/paginator/pt/PTDoc.vue         |  73 -----
 doc/paginator/pt/index.vue         |   6 -
 doc/panel/pt/PTDoc.vue             |  76 -----
 doc/panel/pt/index.vue             |   6 -
 doc/panelmenu/pt/PTDoc.vue         | 417 -------------------------
 doc/panelmenu/pt/index.vue         |   6 -
 doc/password/pt/PTDoc.vue          |  72 -----
 doc/password/pt/index.vue          |   6 -
 doc/picklist/pt/PTDoc.vue          | 198 ------------
 doc/picklist/pt/index.vue          |   6 -
 doc/progressbar/pt/PTDoc.vue       |  55 ----
 doc/progressbar/pt/index.vue       |   6 -
 doc/progressspinner/pt/PTDoc.vue   |  61 ----
 doc/progressspinner/pt/index.vue   |   6 -
 doc/radiobutton/pt/PTDoc.vue       | 129 --------
 doc/radiobutton/pt/index.vue       |   6 -
 doc/rating/pt/PTDoc.vue            |  72 -----
 doc/rating/pt/index.vue            |   6 -
 doc/ripple/pt/PTDoc.vue            |  77 -----
 doc/ripple/pt/index.vue            |   6 -
 doc/scrollpanel/pt/PTDoc.vue       | 105 -------
 doc/scrollpanel/pt/index.vue       |   6 -
 doc/scrolltop/pt/PTDoc.vue         |  77 -----
 doc/scrolltop/pt/index.vue         |   6 -
 doc/selectbutton/pt/PTDoc.vue      |  91 ------
 doc/selectbutton/pt/index.vue      |   6 -
 doc/sidebar/pt/PTDoc.vue           |  79 -----
 doc/sidebar/pt/index.vue           |   6 -
 doc/skeleton/pt/PTDoc.vue          |  43 ---
 doc/skeleton/pt/index.vue          |   6 -
 doc/slider/pt/PTDoc.vue            |  80 -----
 doc/slider/pt/index.vue            |   6 -
 doc/speeddial/pt/PTDoc.vue         | 200 ------------
 doc/speeddial/pt/index.vue         |   6 -
 doc/splitbutton/pt/PTDoc.vue       | 175 -----------
 doc/splitbutton/pt/index.vue       |   6 -
 doc/splitter/pt/PTDoc.vue          |  59 ----
 doc/splitter/pt/index.vue          |   6 -
 doc/steps/pt/PTDoc.vue             | 131 --------
 doc/steps/pt/index.vue             |   6 -
 doc/tabmenu/pt/PTDoc.vue           | 143 ---------
 doc/tabmenu/pt/index.vue           |   6 -
 doc/tabview/pt/PTDoc.vue           | 127 --------
 doc/tabview/pt/index.vue           |   6 -
 doc/tag/pt/PTDoc.vue               |  47 ---
 doc/tag/pt/index.vue               |   6 -
 doc/terminal/pt/PTDoc.vue          | 185 -----------
 doc/terminal/pt/index.vue          |   6 -
 doc/textarea/pt/PTDoc.vue          |  84 -----
 doc/textarea/pt/index.vue          |   6 -
 doc/tieredmenu/pt/PTDoc.vue        | 455 ----------------------------
 doc/tieredmenu/pt/index.vue        |   6 -
 doc/timeline/pt/PTDoc.vue          | 104 -------
 doc/timeline/pt/index.vue          |   6 -
 doc/toast/pt/PTDoc.vue             |  83 -----
 doc/toast/pt/index.vue             |   6 -
 doc/togglebutton/pt/PTDoc.vue      |  80 -----
 doc/togglebutton/pt/index.vue      |   6 -
 doc/toolbar/pt/PTDoc.vue           |  82 -----
 doc/toolbar/pt/index.vue           |   6 -
 doc/tooltip/pt/PTDoc.vue           |  81 -----
 doc/tooltip/pt/index.vue           |   6 -
 doc/tree/pt/PTDoc.vue              | 126 --------
 doc/tree/pt/index.vue              |   6 -
 doc/treeselect/pt/PTDoc.vue        | 144 ---------
 doc/treeselect/pt/index.vue        |   6 -
 doc/treetable/pt/PTDoc.vue         | 199 ------------
 doc/treetable/pt/index.vue         |   6 -
 doc/tristatecheckbox/pt/PTDoc.vue  |  83 -----
 doc/tristatecheckbox/pt/index.vue  |   6 -
 doc/virtualscroller/pt/PTDoc.vue   |  98 ------
 doc/virtualscroller/pt/index.vue   |   6 -
 166 files changed, 11546 deletions(-)
 delete mode 100644 doc/accordion/pt/PTDoc.vue
 delete mode 100644 doc/autocomplete/pt/PTDoc.vue
 delete mode 100644 doc/avatar/pt/PTDoc.vue
 delete mode 100644 doc/badge/pt/PTDoc.vue
 delete mode 100644 doc/blockui/pt/PTDoc.vue
 delete mode 100644 doc/breadcrumb/pt/PTDoc.vue
 delete mode 100644 doc/button/pt/PTDoc.vue
 delete mode 100644 doc/calendar/pt/PTDoc.vue
 delete mode 100644 doc/card/pt/PTDoc.vue
 delete mode 100644 doc/carousel/pt/PTDoc.vue
 delete mode 100644 doc/cascadeselect/pt/PTDoc.vue
 delete mode 100644 doc/chart/pt/PTDoc.vue
 delete mode 100644 doc/checkbox/pt/PTDoc.vue
 delete mode 100644 doc/chip/pt/PTDoc.vue
 delete mode 100644 doc/chips/pt/PTDoc.vue
 delete mode 100644 doc/colorpicker/pt/PTDoc.vue
 delete mode 100644 doc/confirmdialog/pt/PTDoc.vue
 delete mode 100644 doc/confirmpopup/pt/PTDoc.vue
 delete mode 100644 doc/contextmenu/pt/PTDoc.vue
 delete mode 100644 doc/datatable/pt/PTDoc.vue
 delete mode 100644 doc/dataview/pt/PTDoc.vue
 delete mode 100644 doc/dialog/pt/PTDoc.vue
 delete mode 100644 doc/divider/pt/PTDoc.vue
 delete mode 100644 doc/dock/pt/PTDoc.vue
 delete mode 100644 doc/dropdown/pt/PTDoc.vue
 delete mode 100644 doc/dynamicdialog/pt/PTDoc.vue
 delete mode 100644 doc/editor/pt/PTDoc.vue
 delete mode 100644 doc/fieldset/pt/PTDoc.vue
 delete mode 100644 doc/fileupload/pt/PTDoc.vue
 delete mode 100644 doc/galleria/pt/PTDoc.vue
 delete mode 100644 doc/image/pt/PTDoc.vue
 delete mode 100644 doc/inlinemessage/pt/PTDoc.vue
 delete mode 100644 doc/inplace/pt/PTDoc.vue
 delete mode 100644 doc/inputmask/pt/PTDoc.vue
 delete mode 100644 doc/inputnumber/pt/PTDoc.vue
 delete mode 100644 doc/inputswitch/pt/PTDoc.vue
 delete mode 100644 doc/inputtext/pt/PTDoc.vue
 delete mode 100644 doc/knob/pt/PTDoc.vue
 delete mode 100644 doc/listbox/pt/PTDoc.vue
 delete mode 100644 doc/megamenu/pt/PTDoc.vue
 delete mode 100644 doc/menu/pt/PTDoc.vue
 delete mode 100644 doc/menubar/pt/PTDoc.vue
 delete mode 100644 doc/message/pt/PTDoc.vue
 delete mode 100644 doc/multiselect/pt/PTDoc.vue
 delete mode 100644 doc/orderlist/pt/PTDoc.vue
 delete mode 100644 doc/organizationchart/pt/PTDoc.vue
 delete mode 100644 doc/overlaypanel/pt/PTDoc.vue
 delete mode 100644 doc/paginator/pt/PTDoc.vue
 delete mode 100644 doc/panel/pt/PTDoc.vue
 delete mode 100644 doc/panelmenu/pt/PTDoc.vue
 delete mode 100644 doc/password/pt/PTDoc.vue
 delete mode 100644 doc/picklist/pt/PTDoc.vue
 delete mode 100644 doc/progressbar/pt/PTDoc.vue
 delete mode 100644 doc/progressspinner/pt/PTDoc.vue
 delete mode 100644 doc/radiobutton/pt/PTDoc.vue
 delete mode 100644 doc/rating/pt/PTDoc.vue
 delete mode 100644 doc/ripple/pt/PTDoc.vue
 delete mode 100644 doc/scrollpanel/pt/PTDoc.vue
 delete mode 100644 doc/scrolltop/pt/PTDoc.vue
 delete mode 100644 doc/selectbutton/pt/PTDoc.vue
 delete mode 100644 doc/sidebar/pt/PTDoc.vue
 delete mode 100644 doc/skeleton/pt/PTDoc.vue
 delete mode 100644 doc/slider/pt/PTDoc.vue
 delete mode 100644 doc/speeddial/pt/PTDoc.vue
 delete mode 100644 doc/splitbutton/pt/PTDoc.vue
 delete mode 100644 doc/splitter/pt/PTDoc.vue
 delete mode 100644 doc/steps/pt/PTDoc.vue
 delete mode 100644 doc/tabmenu/pt/PTDoc.vue
 delete mode 100644 doc/tabview/pt/PTDoc.vue
 delete mode 100644 doc/tag/pt/PTDoc.vue
 delete mode 100644 doc/terminal/pt/PTDoc.vue
 delete mode 100644 doc/textarea/pt/PTDoc.vue
 delete mode 100644 doc/tieredmenu/pt/PTDoc.vue
 delete mode 100644 doc/timeline/pt/PTDoc.vue
 delete mode 100644 doc/toast/pt/PTDoc.vue
 delete mode 100644 doc/togglebutton/pt/PTDoc.vue
 delete mode 100644 doc/toolbar/pt/PTDoc.vue
 delete mode 100644 doc/tooltip/pt/PTDoc.vue
 delete mode 100644 doc/tree/pt/PTDoc.vue
 delete mode 100644 doc/treeselect/pt/PTDoc.vue
 delete mode 100644 doc/treetable/pt/PTDoc.vue
 delete mode 100644 doc/tristatecheckbox/pt/PTDoc.vue
 delete mode 100644 doc/virtualscroller/pt/PTDoc.vue

diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
deleted file mode 100644
index 9279bd184..000000000
--- a/doc/accordion/pt/PTDoc.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab
-                v-for="(tab, index) in tabs"
-                :key="tab.title"
-                :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }"
-            >
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: `Header ${i + 1}`,
-                content: `Tab ${i + 1} Content`
-            })),
-            code: {
-                basic: `
-<Accordion :activeIndex="0">
-    <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-        :pt="{
-            headerAction: ({ props, parent }) => ({
-                class: panelClass(props, parent, index)
-            })
-        }">
-        <p>{{ tab.content }}</p>
-    </AccordionTab>
-</Accordion>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: \`Header \${i + 1}\`,
-                content: \`Tab \${i + 1} Content\`
-            }))
-        }
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
-    title: \`Header \${i + 1}\`,
-    content: \`Tab \${i + 1} Content\`
-})));
-
-const panelClass = (props, parent, index) => {
-    return [
-        {
-            'bg-primary': parent.state.d_activeIndex === index
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-};
-</script>
diff --git a/doc/accordion/pt/index.vue b/doc/accordion/pt/index.vue
index fb05d45e3..aba986ce4 100644
--- a/doc/accordion/pt/index.vue
+++ b/doc/accordion/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'AccordionTab PT Options',
                     component: DocApiTable,
                     data: getPTOption('AccordionTab')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/autocomplete/pt/PTDoc.vue b/doc/autocomplete/pt/PTDoc.vue
deleted file mode 100644
index 2b065ec30..000000000
--- a/doc/autocomplete/pt/PTDoc.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                basic: `
-<AutoComplete
-    v-model="value"
-    :suggestions="items"
-    @complete="search"
-    :pt="{
-        input: { class: 'w-16rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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-content-center">
-        <AutoComplete
-            v-model="value"
-            :suggestions="items"
-            @complete="search"
-            :pt="{
-                input: { class: 'w-16rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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/doc/autocomplete/pt/index.vue b/doc/autocomplete/pt/index.vue
index c938bf4d9..afa1dbc54 100644
--- a/doc/autocomplete/pt/index.vue
+++ b/doc/autocomplete/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'AutoComplete PT Options',
                     component: DocApiTable,
                     data: getPTOption('AutoComplete')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/avatar/pt/PTDoc.vue b/doc/avatar/pt/PTDoc.vue
deleted file mode 100644
index 229a20b8b..000000000
--- a/doc/avatar/pt/PTDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" :pt="{ image: { class: 'w-4rem h-4rem' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-    :pt="{
-        image: { class: 'w-4rem h-4rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            image: { class: 'w-4rem h-4rem' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            image: { class: 'w-4rem h-4rem' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/avatar/pt/index.vue b/doc/avatar/pt/index.vue
index 3c435f9eb..3107ed8d2 100644
--- a/doc/avatar/pt/index.vue
+++ b/doc/avatar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'AvatarGroup PT Options',
                     component: DocApiTable,
                     data: getPTOption('AvatarGroup')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
deleted file mode 100644
index 8008e637d..000000000
--- a/doc/badge/pt/PTDoc.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-// component
-<Badge
-    value="2"
-    :pt="{
-        root: 'bg-primary border-round-xl'
-    }"
-/>
-
-// directive
-<i
-    v-badge.danger="{
-        value: '5+',
-        pt: {
-            root: 'bg-primary'
-        }
-    }"
-    class="pi pi-calendar text-4xl"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        // component
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-
-        // directive
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        // component
-        <Badge
-            value="2"
-            :pt="{
-                root: 'bg-primary border-round-xl'
-            }"
-        />
-
-        // directive
-        <i
-            v-badge.danger="{
-                value: '5+',
-                pt: {
-                    root: 'bg-primary'
-                }
-            }"
-            class="pi pi-calendar text-4xl"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/badge/pt/index.vue b/doc/badge/pt/index.vue
index aeeda45b0..a4b244f92 100644
--- a/doc/badge/pt/index.vue
+++ b/doc/badge/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Badge PT Options',
                     component: DocApiTable,
                     data: getPTOption('Badge')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
deleted file mode 100644
index 8f9071e2f..000000000
--- a/doc/blockui/pt/PTDoc.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <div class="mb-3">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-            <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>
-        </BlockUI>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            blocked: false,
-            code: {
-                basic: `
-<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-    <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>
-</BlockUI>
-`,
-                options: `
-<template>
-    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-        <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>
-    </BlockUI>
-</template>
-`,
-                composition: `
-<template>
-    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
-        <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>
-    </BlockUI>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/blockui/pt/index.vue b/doc/blockui/pt/index.vue
index 04f93c43d..e22dc8ce7 100644
--- a/doc/blockui/pt/index.vue
+++ b/doc/blockui/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'BlockUI PT Options',
                     component: DocApiTable,
                     data: getPTOption('BlockUI')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/breadcrumb/pt/PTDoc.vue b/doc/breadcrumb/pt/PTDoc.vue
deleted file mode 100644
index 74c8f282e..000000000
--- a/doc/breadcrumb/pt/PTDoc.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Breadcrumb
-            :home="home"
-            :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/'
-            },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
-            code: {
-                basic: `
-<Breadcrumb :home="home" :model="items"
-    :pt="{
-        root: { class: 'surface-ground' },
-        label: ({ props }) => ({
-            class: props.index === items.length - 1 ? 'font-italic' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Breadcrumb :home="home" :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            home: {
-                icon: 'pi pi-home',
-                to: '/',
-            },
-            items: [
-                {label: 'Computer'},
-                {label: 'Notebook'},
-                {label: 'Accessories'},
-                {label: 'Backpacks'},
-                {label: 'Item'}
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Breadcrumb :home="home" :model="items"
-            :pt="{
-                root: { class: 'surface-ground' },
-                label: ({ props }) => ({
-                    class: props.index === items.length - 1 ? 'font-italic' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({
-    icon: 'pi pi-home',
-    to: '/',
-});
-
-const items = ref([
-    {label: 'Computer'},
-    {label: 'Notebook'},
-    {label: 'Accessories'},
-    {label: 'Backpacks'},
-    {label: 'Item'}
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/breadcrumb/pt/index.vue b/doc/breadcrumb/pt/index.vue
index a7c2e4e5a..4edc6924f 100644
--- a/doc/breadcrumb/pt/index.vue
+++ b/doc/breadcrumb/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Breadcrumb PT Options',
                     component: DocApiTable,
                     data: getPTOption('Breadcrumb')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/button/pt/PTDoc.vue b/doc/button/pt/PTDoc.vue
deleted file mode 100644
index 248b1a06e..000000000
--- a/doc/button/pt/PTDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check" :pt="{ root: { class: 'bg-indigo-600 border-indigo-600' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Submit" icon="pi pi-check"
-    :pt="{ 
-        root: { class: 'bg-indigo-600 border-indigo-600' } 
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check"
-            :pt="{ 
-                root: { class: 'bg-indigo-600 border-indigo-600' } 
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-3 justify-content-center">
-        <Button label="Submit" icon="pi pi-check"
-            :pt="{ 
-                root: { class: 'bg-indigo-600 border-indigo-600' } 
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/button/pt/index.vue b/doc/button/pt/index.vue
index 3864e7558..f6fe78f23 100644
--- a/doc/button/pt/index.vue
+++ b/doc/button/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Button PT Options',
                     component: DocApiTable,
                     data: getPTOption('Button')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/calendar/pt/PTDoc.vue b/doc/calendar/pt/PTDoc.vue
deleted file mode 100644
index fbd5b564a..000000000
--- a/doc/calendar/pt/PTDoc.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null,
-            code: {
-                basic: `
-<Calendar
-    v-model="date"
-    showIcon
-    :pt="{
-        input: { class: 'w-16rem' },
-        dropdownButton: {
-            root: { class: 'bg-teal-500 border-teal-500' }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            date: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Calendar
-            v-model="date"
-            showIcon
-            :pt="{
-                input: { class: 'w-16rem' },
-                dropdownButton: {
-                    root: { class: 'bg-teal-500 border-teal-500' }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/calendar/pt/index.vue b/doc/calendar/pt/index.vue
index 4e530ebd7..259fef8a9 100644
--- a/doc/calendar/pt/index.vue
+++ b/doc/calendar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Calendar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Calendar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/card/pt/PTDoc.vue b/doc/card/pt/PTDoc.vue
deleted file mode 100644
index 9f2914070..000000000
--- a/doc/card/pt/PTDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <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>
-            </template>
-        </Card>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-    <template #title> Simple Card </template>
-    <template #content>
-        <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>
-    </template>
-</Card>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <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>
-            </template>
-        </Card>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
-            <template #title> Simple Card </template>
-            <template #content>
-                <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>
-            </template>
-        </Card>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/card/pt/index.vue b/doc/card/pt/index.vue
index 52eacd4ae..a0471e14d 100644
--- a/doc/card/pt/index.vue
+++ b/doc/card/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Card PT Options',
                     component: DocApiTable,
                     data: getPTOption('Card')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
deleted file mode 100644
index 982634c22..000000000
--- a/doc/carousel/pt/PTDoc.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </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"
-    :pt="{
-        indicatorButton: { class: 'border-round-lg' }
-    }"
->
-    <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-            <div class="mb-3">
-                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                </div>
-            </div>
-        </div>
-    </template>
-</Carousel>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </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 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Carousel
-            :value="products"
-            :numVisible="3"
-            :numScroll="3"
-            :responsiveOptions="responsiveOptions"
-            :pt="{
-                indicatorButton: { class: 'border-round-lg' }
-            }"
-        >
-            <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
-                        </div>
-                    </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 'warning';
-
-        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 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/doc/carousel/pt/index.vue b/doc/carousel/pt/index.vue
index 2e99b0bfc..64b6dd602 100644
--- a/doc/carousel/pt/index.vue
+++ b/doc/carousel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Carousel PT Options',
                     component: DocApiTable,
                     data: getPTOption('Carousel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/cascadeselect/pt/PTDoc.vue b/doc/cascadeselect/pt/PTDoc.vue
deleted file mode 100644
index 0e0f74689..000000000
--- a/doc/cascadeselect/pt/PTDoc.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </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']"
-    placeholder="Select a City"
-    :pt="{
-        root: { style: { minWidth: '14rem' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </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-content-center">
-        <CascadeSelect
-            v-model="selectedCity"
-            :options="countries"
-            optionLabel="cname"
-            optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']"
-            placeholder="Select a City"
-            :pt="{
-                root: { style: { minWidth: '14rem' } }
-            }"
-        />
-    </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/doc/cascadeselect/pt/index.vue b/doc/cascadeselect/pt/index.vue
index c0632165d..00555854e 100644
--- a/doc/cascadeselect/pt/index.vue
+++ b/doc/cascadeselect/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'CascadeSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('CascadeSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/chart/pt/PTDoc.vue b/doc/chart/pt/PTDoc.vue
deleted file mode 100644
index 95b89fd73..000000000
--- a/doc/chart/pt/PTDoc.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            },
-            code: {
-                basic: `
-<Chart
-    type="pie"
-    :data="chartData"
-    :options="chartOptions"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            }
-        };
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-    },
-    methods: {
-        setChartData() {
-            const documentStyle = getComputedStyle(document.body);
-
-            return {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [540, 325, 702],
-                        backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                        hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-                    }
-                ]
-            };
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Chart
-            type="pie"
-            :data="chartData"
-            :options="chartOptions"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-
-onMounted(() => {
-    chartData.value = setChartData();
-});
-
-const chartData = ref();
-const chartOptions = ref({
-    plugins: {
-        legend: {
-            labels: {
-                usePointStyle: true
-            }
-        }
-    }
-});
-
-const setChartData = () => {
-    const documentStyle = getComputedStyle(document.body);
-
-    return {
-        labels: ['A', 'B', 'C'],
-        datasets: [
-            {
-                data: [540, 325, 702],
-                backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-            }
-        ]
-    };
-};
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        this.chartData = this.setChartData();
-    },
-    methods: {
-        setChartData() {
-            const documentStyle = getComputedStyle(document.body);
-
-            return {
-                labels: ['A', 'B', 'C'],
-                datasets: [
-                    {
-                        data: [540, 325, 702],
-                        backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
-                        hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
-                    }
-                ]
-            };
-        }
-    }
-};
-</script>
diff --git a/doc/chart/pt/index.vue b/doc/chart/pt/index.vue
index 428ec336f..d0f684a0f 100644
--- a/doc/chart/pt/index.vue
+++ b/doc/chart/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chart PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chart')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/checkbox/pt/PTDoc.vue b/doc/checkbox/pt/PTDoc.vue
deleted file mode 100644
index 60d305eb3..000000000
--- a/doc/checkbox/pt/PTDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<Checkbox
-    v-model="checked"
-    binary
-    :pt="{
-        input: ({ props, state }) => ({
-            class: state.focused ? 'border-orange-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Checkbox
-            v-model="checked"
-            binary
-            :pt="{
-                input: ({ props, state }) => ({
-                    class: state.focused ? 'border-orange-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/checkbox/pt/index.vue b/doc/checkbox/pt/index.vue
index 8f7d18198..308b8c1f0 100644
--- a/doc/checkbox/pt/index.vue
+++ b/doc/checkbox/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Checkbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('Checkbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/chip/pt/PTDoc.vue b/doc/chip/pt/PTDoc.vue
deleted file mode 100644
index a693f00bf..000000000
--- a/doc/chip/pt/PTDoc.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Chip
-            label="Amy Elsner"
-            image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-                label: { class: 'text-white' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Chip
-    label="Amy Elsner"
-    image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-    :pt="{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-        label: { class: 'text-white' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Chip
-        label="Amy Elsner"
-        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-            label: { class: 'text-white' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Chip
-        label="Amy Elsner"
-        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
-            label: { class: 'text-white' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chip/pt/index.vue b/doc/chip/pt/index.vue
index 4655cf448..922646382 100644
--- a/doc/chip/pt/index.vue
+++ b/doc/chip/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chip PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chip')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/chips/pt/PTDoc.vue b/doc/chips/pt/PTDoc.vue
deleted file mode 100644
index d7820a737..000000000
--- a/doc/chips/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Chips
-    v-model="value"
-    :pt="{
-        root: { class: 'flex' },
-        container: { class: 'flex-1' },
-        token: { class: 'bg-primary' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Chips
-            v-model="value"
-            :pt="{
-                root: { class: 'flex' },
-                container: { class: 'flex-1' },
-                token: { class: 'bg-primary' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chips/pt/index.vue b/doc/chips/pt/index.vue
index dd4b70c04..30757ad87 100644
--- a/doc/chips/pt/index.vue
+++ b/doc/chips/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Chips PT Options',
                     component: DocApiTable,
                     data: getPTOption('Chips')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/colorpicker/pt/PTDoc.vue b/doc/colorpicker/pt/PTDoc.vue
deleted file mode 100644
index c452931a5..000000000
--- a/doc/colorpicker/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null,
-            code: {
-                basic: `
-<ColorPicker
-    v-model="color"
-    inline
-    :pt="{
-        colorHandler: { class: 'w-1rem h-1rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            color: null
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ColorPicker
-            v-model="color"
-            inline
-            :pt="{
-                colorHandler: { class: 'w-1rem h-1rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/colorpicker/pt/index.vue b/doc/colorpicker/pt/index.vue
index 4099b6f99..32d4562a3 100644
--- a/doc/colorpicker/pt/index.vue
+++ b/doc/colorpicker/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ColorPicker PT Options',
                     component: DocApiTable,
                     data: getPTOption('ColorPicker')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/confirmdialog/pt/PTDoc.vue b/doc/confirmdialog/pt/PTDoc.vue
deleted file mode 100644
index 33d312a98..000000000
--- a/doc/confirmdialog/pt/PTDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <ConfirmDialog group="pt" :pt="{ headerTitle: { class: 'text-primary' } }" />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmDialog
-    group="pt"
-    :pt="{
-        headerTitle: { class: 'text-primary' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <ConfirmDialog
-        group="pt"
-        :pt="{
-            headerTitle: { class: 'text-primary' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm() {
-            this.$confirm.require({
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                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="pt"
-        :pt="{
-            headerTitle: { class: 'text-primary' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
-        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: {
-        confirm() {
-            this.$confirm.require({
-                group: 'pt',
-                message: 'Are you sure you want to proceed?',
-                header: 'Confirmation',
-                icon: 'pi pi-exclamation-triangle',
-                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/doc/confirmdialog/pt/index.vue b/doc/confirmdialog/pt/index.vue
index 82ff6819e..848795e1f 100644
--- a/doc/confirmdialog/pt/index.vue
+++ b/doc/confirmdialog/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ConfirmDialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('ConfirmDialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/confirmpopup/pt/PTDoc.vue b/doc/confirmpopup/pt/PTDoc.vue
deleted file mode 100644
index c5c4ee8b8..000000000
--- a/doc/confirmpopup/pt/PTDoc.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ConfirmPopup
-    group="pt"
-    :pt="{
-        root: { class: 'surface-100' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <Toast />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        confirm(event) {
-            this.$confirm.require({
-                group: 'pt',
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                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>
-    <ConfirmPopup
-        group="pt"
-        :pt="{
-            root: { class: 'surface-100' }
-        }"
-    />
-    <Toast />
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm = (event) => {
-    confirm.require({
-        group: 'pt',
-        target: event.currentTarget,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        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: {
-        confirm(event) {
-            this.$confirm.require({
-                group: 'pt',
-                target: event.currentTarget,
-                message: 'Are you sure you want to proceed?',
-                icon: 'pi pi-exclamation-triangle',
-                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/doc/confirmpopup/pt/index.vue b/doc/confirmpopup/pt/index.vue
index 01b93443d..bfcc4019e 100644
--- a/doc/confirmpopup/pt/index.vue
+++ b/doc/confirmpopup/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ConfirmPopup PT Options',
                     component: DocApiTable,
                     data: getPTOption('ConfirmPopup')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
deleted file mode 100644
index 541b724eb..000000000
--- a/doc/contextmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu
-    ref="menu"
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex md:justify-content-center">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    },
-    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/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu
-            ref="menu"
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const menu = ref();
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-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',
-        icon: 'pi pi-fw pi-pencil',
-        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',
-        icon: 'pi pi-fw pi-user',
-        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',
-        icon: 'pi pi-fw pi-calendar',
-        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'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-
-const onImageRightClick = (event) => {
-    menu.value.show(event);
-};
-
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-};
-</script>
diff --git a/doc/contextmenu/pt/index.vue b/doc/contextmenu/pt/index.vue
index aa66309fa..6009a524f 100644
--- a/doc/contextmenu/pt/index.vue
+++ b/doc/contextmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ContextMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('ContextMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
deleted file mode 100644
index 0b65c687c..000000000
--- a/doc/datatable/pt/PTDoc.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <DataTable
-                :value="products"
-                sortMode="multiple"
-                :pt="{
-                    table: { style: { minWidth: '50rem' } }
-                }"
-            >
-                <Column
-                    field="code"
-                    header="Code"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="name"
-                    header="Name"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="category"
-                    header="Category"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-                <Column
-                    field="quantity"
-                    header="Quantity"
-                    sortable
-                    :pt="{
-                        sortBadge: { class: 'bg-primary' },
-                        headerCell: { style: { width: '25%' } }
-                    }"
-                />
-            </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"
-    :pt="{
-        table: { style: { minWidth: '50rem' } }
-    }"
->
-    <Column
-        field="code"
-        header="Code"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="category"
-        header="Category"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-    <Column
-        field="quantity"
-        header="Quantity"
-        sortable
-        :pt="{
-            sortBadge: { class: 'bg-primary' },
-            headerCell: { style: { width: '25%' } }
-        }"
-    />
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataTable
-            :value="products"
-            sortMode="multiple"
-            :pt="{
-                table: { style: { minWidth: '50rem' } }
-            }"
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-        </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"
-            :pt="{
-                table: { style: { minWidth: '50rem' } }
-            }"
-        >
-            <Column
-                field="code"
-                header="Code"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="category"
-                header="Category"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-            <Column
-                field="quantity"
-                header="Quantity"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'bg-primary' },
-                    headerCell: { style: { width: '25%' } }
-                }"
-            />
-        </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/doc/datatable/pt/index.vue b/doc/datatable/pt/index.vue
index 300940999..c2de789f3 100644
--- a/doc/datatable/pt/index.vue
+++ b/doc/datatable/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -46,11 +45,6 @@ export default {
                     label: 'Row PT Options',
                     component: DocApiTable,
                     data: getPTOption('Row')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
deleted file mode 100644
index 839155556..000000000
--- a/doc/dataview/pt/PTDoc.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </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',
-            code: {
-                basic: `
-<DataView
-    :value="products"
-    :layout="layout"
-    :pt="{
-        grid: { class: 'surface-ground' }
-    }"
->
-    <template #header>
-        <div class="flex justify-content-end">
-            <DataViewLayoutOptions
-                v-model="layout"
-                :pt="{
-                    listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                    gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                }"
-            />
-        </div>
-    </template>
-
-    <template #list="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                            <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                            <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                            <div class="flex align-items-center gap-3">
-                                <span class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </span>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                        </div>
-                        <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                            <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template #grid="slotProps">
-        <div class="grid grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                <div class="p-4 border-1 surface-border surface-card border-round">
-                    <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag"></i>
-                            <span class="font-semibold">{{ item.category }}</span>
-                        </div>
-                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                    </div>
-                    <div class="flex flex-column align-items-center gap-3 py-5">
-                        <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <div class="text-2xl font-bold">{{ item.name }}</div>
-                        <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                    </div>
-                    <div class="flex align-items-center justify-content-between">
-                        <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                        <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-</DataView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            layout: 'grid'
-        }
-    },
-    mounted() {
-        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <DataView
-            :value="products"
-            :layout="layout"
-            :pt="{
-                grid: { class: 'surface-ground' }
-            }"
-        >
-            <template #header>
-                <div class="flex justify-content-end">
-                    <DataViewLayoutOptions
-                        v-model="layout"
-                        :pt="{
-                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
-                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
-                        }"
-                    />
-                </div>
-            </template>
-
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
-                                <div class="flex flex-column align-items-center sm:align-items-start gap-3">
-                                    <div class="text-2xl font-bold text-900">{{ item.name }}</div>
-                                    <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
-                                    <div class="flex align-items-center gap-3">
-                                        <span class="flex align-items-center gap-2">
-                                            <i class="pi pi-tag"></i>
-                                            <span class="font-semibold">{{ item.category }}</span>
-                                        </span>
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                    </div>
-                                </div>
-                                <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
-                                    <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <template #grid="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
-                        <div class="p-4 border-1 surface-border surface-card border-round">
-                            <div class="flex flex-wrap align-items-center justify-content-between gap-2">
-                                <div class="flex align-items-center gap-2">
-                                    <i class="pi pi-tag"></i>
-                                    <span class="font-semibold">{{ item.category }}</span>
-                                </div>
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                            </div>
-                            <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="text-2xl font-bold">{{ item.name }}</div>
-                                <Rating value="{product.rating}" readonly :cancel="false"></Rating>
-                            </div>
-                            <div class="flex align-items-center justify-content-between">
-                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
-                            </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, 6)));
-});
-
-const products = ref();
-const layout = ref('grid');
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        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, 6)));
-    },
-    methods: {
-        getSeverity(product) {
-            switch (product.inventoryStatus) {
-                case 'INSTOCK':
-                    return 'success';
-
-                case 'LOWSTOCK':
-                    return 'warning';
-
-                case 'OUTOFSTOCK':
-                    return 'danger';
-
-                default:
-                    return null;
-            }
-        }
-    }
-};
-</script>
diff --git a/doc/dataview/pt/index.vue b/doc/dataview/pt/index.vue
index 2ec35e6c3..757805ee9 100644
--- a/doc/dataview/pt/index.vue
+++ b/doc/dataview/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'DataViewLayoutOptions PT Options',
                     component: DocApiTable,
                     data: getPTOption('DataViewLayoutOptions')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
deleted file mode 100644
index 70daa006b..000000000
--- a/doc/dialog/pt/PTDoc.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <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>
-        </Dialog>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Dialog
-    v-model:visible="visible"
-    modal
-    header="Header"
-    :pt="{
-        root: { class: 'w-12 sm:w-9 md:w-6' }
-    }"
->
-    <p>Lorem ipsum </p>
-</Dialog>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <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>
-        </Dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-
-        <Dialog
-            v-model:visible="visible"
-            modal
-            header="Header"
-            :pt="{
-                root: { class: 'w-12 sm:w-9 md:w-6' }
-            }"
-        >
-            <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>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dialog/pt/index.vue b/doc/dialog/pt/index.vue
index bc6133c8d..c183b1ff3 100644
--- a/doc/dialog/pt/index.vue
+++ b/doc/dialog/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/divider/pt/PTDoc.vue b/doc/divider/pt/PTDoc.vue
deleted file mode 100644
index a8afec9a0..000000000
--- a/doc/divider/pt/PTDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <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>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <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>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<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>
-
-<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-    <b>Center</b>
-</Divider>
-
-<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>
-`,
-                options: `
-<template>
-    <div class="card">
-        <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>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <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>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <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>
-
-        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
-            <b>Center</b>
-        </Divider>
-
-        <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>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/divider/pt/index.vue b/doc/divider/pt/index.vue
index d003d9bfb..4e74657ea 100644
--- a/doc/divider/pt/index.vue
+++ b/doc/divider/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Divider PT Options',
                     component: DocApiTable,
                     data: getPTOption('Divider')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dock/pt/PTDoc.vue b/doc/dock/pt/PTDoc.vue
deleted file mode 100644
index 5c07ede6e..000000000
--- a/doc/dock/pt/PTDoc.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card dock-demo">
-        <div class="dock-window">
-            <Dock :model="items" position="bottom" :pt="{ container: { style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' } } }">
-                <template #icon="{ item }">
-                    <img :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'
-                }
-            ],
-            code: {
-                basic: `
-<Dock :model="items" position="bottom"
-    :pt="{ 
-        container: {
-            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-        }
-    }"
->
-    <template #icon="{ item }">
-        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-    </template>
-</Dock>
-`,
-                options: `
-<template>
-    <div class="card dock-demo">
-        <div class="dock-window">
-            <Dock :model="items" position="bottom"
-                :pt="{ 
-                    container: {
-                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                    }
-                }"
-            >
-                <template #icon="{ item }">
-                    <img :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'
-                }
-            ]
-        }
-    }
-}
-<\/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="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
-            <Dock :model="items" position="bottom"
-                :pt="{ 
-                    container: {
-                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
-                    }
-                }"
-            >
-                <template #icon="{ item }">
-                    <img :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'
-    }
-]);
-
-<\/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/doc/dock/pt/index.vue b/doc/dock/pt/index.vue
index c9b2caaaf..e096c2d94 100644
--- a/doc/dock/pt/index.vue
+++ b/doc/dock/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dock PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dock')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dropdown/pt/PTDoc.vue b/doc/dropdown/pt/PTDoc.vue
deleted file mode 100644
index dc7811089..000000000
--- a/doc/dropdown/pt/PTDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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: `
-<Dropdown
-    v-model="selectedCity"
-    :options="cities"
-    optionLabel="name"
-    placeholder="Select a City"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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-content-center">
-        <Dropdown
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select a City"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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/doc/dropdown/pt/index.vue b/doc/dropdown/pt/index.vue
index 14965d722..ff5cf3e27 100644
--- a/doc/dropdown/pt/index.vue
+++ b/doc/dropdown/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dropdown PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dropdown')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
deleted file mode 100644
index f8174c51f..000000000
--- a/doc/dynamicdialog/pt/PTDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<DynamicDialog
-    :pt="{
-        root: { class: 'w-12 sm:w-9 md:w-6' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <DynamicDialog
-        :pt="{
-            root: { class: 'w-12 sm:w-9 md:w-6' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <DynamicDialog
-        :pt="{
-            root: { class: 'w-12 sm:w-9 md:w-6' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dynamicdialog/pt/index.vue b/doc/dynamicdialog/pt/index.vue
index 45417ede2..c992d9484 100644
--- a/doc/dynamicdialog/pt/index.vue
+++ b/doc/dynamicdialog/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Dialog PT Options',
                     component: DocApiTable,
                     data: getPTOption('Dialog')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/editor/pt/PTDoc.vue b/doc/editor/pt/PTDoc.vue
deleted file mode 100644
index 1ec8f90f2..000000000
--- a/doc/editor/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Editor
-    v-model="value"
-    :pt="{
-        content: { style: { height: '320px' } },
-        toolbar: { class: 'surface-ground' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Editor
-            v-model="value"
-            :pt="{
-                content: { style: { height: '320px' } },
-                toolbar: { class: 'surface-ground' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/editor/pt/index.vue b/doc/editor/pt/index.vue
index d5e5b01c0..70da55c63 100644
--- a/doc/editor/pt/index.vue
+++ b/doc/editor/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Editor PT Options',
                     component: DocApiTable,
                     data: getPTOption('Editor')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/fieldset/pt/PTDoc.vue b/doc/fieldset/pt/PTDoc.vue
deleted file mode 100644
index 49728a2f6..000000000
--- a/doc/fieldset/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true" :pt="{ legend: { class: 'bg-primary' }, legendTitle: { class: 'text-white' }, togglerIcon: { class: 'text-white' } }">
-            <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>
-        </Fieldset>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Fieldset
-    legend="Header"
-    :toggleable="true"
-    :pt="{
-        legend: { class: 'bg-primary' },
-        legendTitle: { class: 'text-white' },
-        togglerIcon: { class: 'text-white' }
-    }">
-    <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>
-</Fieldset>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Fieldset
-            legend="Header"
-            :toggleable="true"
-            :pt="{
-                legend: { class: 'bg-primary' },
-                legendTitle: { class: 'text-white' },
-                togglerIcon: { class: 'text-white' }
-            }">
-            <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>
-        </Fieldset>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset
-            legend="Header"
-            :toggleable="true"
-            :pt="{
-                legend: { class: 'bg-primary' },
-                legendTitle: { class: 'text-white' },
-                togglerIcon: { class: 'text-white' }
-            }">
-            <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>
-        </Fieldset>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/fieldset/pt/index.vue b/doc/fieldset/pt/index.vue
index e88e54fd6..e00ceccf2 100644
--- a/doc/fieldset/pt/index.vue
+++ b/doc/fieldset/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Fieldset PT Options',
                     component: DocApiTable,
                     data: getPTOption('Fieldset')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/fileupload/pt/PTDoc.vue b/doc/fileupload/pt/PTDoc.vue
deleted file mode 100644
index c8c78dfab..000000000
--- a/doc/fileupload/pt/PTDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<FileUpload
-    name="demo[]"
-    url="./upload.php"
-    @upload="onAdvancedUpload($event)"
-    :multiple="true"
-    accept="image/*"
-    :maxFileSize="1000000"
-    :pt="{
-        content: { class: 'surface-ground' }
-    }"
->
-    <template #empty>
-        <p>Drag and drop files to here to upload.</p>
-    </template>
-</FileUpload>
-`,
-                options: `
-<template>
-    <div class="card">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-        <Toast />
-    </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">
-        <FileUpload
-            name="demo[]"
-            url="./upload.php"
-            @upload="onAdvancedUpload($event)"
-            :multiple="true"
-            accept="image/*"
-            :maxFileSize="1000000"
-            :pt="{
-                content: { class: 'surface-ground' }
-            }"
-        >
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-        <Toast />
-    </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/doc/fileupload/pt/index.vue b/doc/fileupload/pt/index.vue
index 6468dd10f..dd148005a 100644
--- a/doc/fileupload/pt/index.vue
+++ b/doc/fileupload/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'FileUpload PT Options',
                     component: DocApiTable,
                     data: getPTOption('FileUpload')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/galleria/pt/PTDoc.vue b/doc/galleria/pt/PTDoc.vue
deleted file mode 100644
index d927f166b..000000000
--- a/doc/galleria/pt/PTDoc.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Galleria
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="5"
-            :pt="{
-                root: { style: { maxWidth: '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>
-    <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"
-    :pt="{
-        root: { style: { maxWidth: '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 md:flex md:justify-content-center">
-        <Galleria
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="5"
-            :pt="{
-                root: { style: { maxWidth: '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 md:flex md:justify-content-center">
-        <Galleria
-            :value="images"
-            :responsiveOptions="responsiveOptions"
-            :numVisible="5"
-            :pt="{
-                root: { style: { maxWidth: '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'
-},
-...
-        `
-            }
-        };
-    },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    }
-};
-</script>
diff --git a/doc/galleria/pt/index.vue b/doc/galleria/pt/index.vue
index 489a2f1af..c9ceb35fb 100644
--- a/doc/galleria/pt/index.vue
+++ b/doc/galleria/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Galleria PT Options',
                     component: DocApiTable,
                     data: getPTOption('Galleria')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/image/pt/PTDoc.vue b/doc/image/pt/PTDoc.vue
deleted file mode 100644
index 0ed025ebd..000000000
--- a/doc/image/pt/PTDoc.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Image
-            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-            alt="Image"
-            width="250"
-            preview
-            :pt="{
-                image: { class: 'w-15rem' }
-            }"
-        />
-    </div>
-
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Image
-    src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-    alt="Image"
-    width="250"
-    preview
-    :pt="{
-        image: { class: 'w-15rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Image
-            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-            alt="Image"
-            width="250"
-            preview
-            :pt="{
-                image: { class: 'w-15rem' }
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Image
-            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
-            alt="Image"
-            width="250"
-            preview
-            :pt="{
-                image: { class: 'w-15rem' }
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/image/pt/index.vue b/doc/image/pt/index.vue
index 29cac5db5..da6ddf4f1 100644
--- a/doc/image/pt/index.vue
+++ b/doc/image/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Image PT Options',
                     component: DocApiTable,
                     data: getPTOption('Image')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inlinemessage/pt/PTDoc.vue b/doc/inlinemessage/pt/PTDoc.vue
deleted file mode 100644
index 6ae5a8c5c..000000000
--- a/doc/inlinemessage/pt/PTDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InlineMessage
-            :pt="{
-                root: { class: 'bg-yellow-100' },
-                icon: { class: 'hidden' }
-            }"
-        >
-            Username is required
-        </InlineMessage>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InlineMessage
-    :pt="{
-        root: { class: 'bg-yellow-100' },
-        icon: { class: 'hidden' }
-    }"
->
-    Username is required
-</InlineMessage>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InlineMessage
-            :pt="{
-                root: { class: 'bg-indigo-100' },
-                icon: { class: 'hidden' }
-            }"
-        >
-            Username is required
-        </InlineMessage>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InlineMessage
-            :pt="{
-                root: { class: 'bg-indigo-100' },
-                icon: { class: 'hidden' }
-            }"
-        >
-            Username is required
-        </InlineMessage>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inlinemessage/pt/index.vue b/doc/inlinemessage/pt/index.vue
index 108635cb1..3c6edfe4f 100644
--- a/doc/inlinemessage/pt/index.vue
+++ b/doc/inlinemessage/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InlineMessage PT Options',
                     component: DocApiTable,
                     data: getPTOption('InlineMessage')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inplace/pt/PTDoc.vue b/doc/inplace/pt/PTDoc.vue
deleted file mode 100644
index e5aa268b7..000000000
--- a/doc/inplace/pt/PTDoc.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Inplace
-            :pt="{
-                display: { class: 'bg-primary' }
-            }"
-        >
-            <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
-    :pt="{
-        display: { class: 'bg-primary' }
-    }"
->
-    <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
-            :pt="{
-                display: { class: 'bg-primary' }
-            }"
-        >
-            <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
-            :pt="{
-                display: { class: 'bg-primary' }
-            }"
-        >
-            <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/doc/inplace/pt/index.vue b/doc/inplace/pt/index.vue
index 9430ec46d..d14b97ea9 100644
--- a/doc/inplace/pt/index.vue
+++ b/doc/inplace/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Inplace PT Options',
                     component: DocApiTable,
                     data: getPTOption('Inplace')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputmask/pt/PTDoc.vue b/doc/inputmask/pt/PTDoc.vue
deleted file mode 100644
index b7a928a68..000000000
--- a/doc/inputmask/pt/PTDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputMask
-            id="basic"
-            v-model="value"
-            mask="99-999999"
-            placeholder="99-999999"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </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"
-    :pt="{
-        root: { class: 'border-teal-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputMask
-            id="basic"
-            v-model="value"
-            mask="99-999999"
-            placeholder="99-999999"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputMask
-            id="basic"
-            v-model="value"
-            mask="99-999999"
-            placeholder="99-999999"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputmask/pt/index.vue b/doc/inputmask/pt/index.vue
index 97e853d2a..cd115f883 100644
--- a/doc/inputmask/pt/index.vue
+++ b/doc/inputmask/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputMask PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputMask')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputnumber/pt/PTDoc.vue b/doc/inputnumber/pt/PTDoc.vue
deleted file mode 100644
index b96d0fb99..000000000
--- a/doc/inputnumber/pt/PTDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="horizontal"
-            :step="0.25"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-            mode="currency"
-            currency="EUR"
-            :pt="{
-                decrementButton: {
-                    root: {
-                        class: 'bg-orange-500 border-orange-500'
-                    }
-                },
-                incrementButton: {
-                    root: {
-                        class: 'bg-teal-500 border-teal-500'
-                    }
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 20,
-            code: {
-                basic: `
-<InputNumber
-    v-model="value"
-    showButtons
-    buttonLayout="horizontal"
-    :step="0.25"
-    incrementButtonIcon="pi pi-plus"
-    decrementButtonIcon="pi pi-minus"
-    mode="currency"
-    currency="EUR"
-    :pt="{
-        decrementButton: {
-            root: {
-                class: 'bg-orange-500 border-orange-500'
-            }
-        },
-        incrementButton: {
-            root: {
-                class: 'bg-teal-500 border-teal-500'
-            }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="horizontal"
-            :step="0.25"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-            mode="currency"
-            currency="EUR"
-            :pt="{
-                decrementButton: {
-                    root: {
-                        class: 'bg-orange-500 border-orange-500'
-                    }
-                },
-                incrementButton: {
-                    root: {
-                        class: 'bg-teal-500 border-teal-500'
-                    }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 20
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="horizontal"
-            :step="0.25"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-            mode="currency"
-            currency="EUR"
-            :pt="{
-                decrementButton: {
-                    root: {
-                        class: 'bg-orange-500 border-orange-500'
-                    }
-                },
-                incrementButton: {
-                    root: {
-                        class: 'bg-teal-500 border-teal-500'
-                    }
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref(20);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputnumber/pt/index.vue b/doc/inputnumber/pt/index.vue
index aa8973fed..91111efe1 100644
--- a/doc/inputnumber/pt/index.vue
+++ b/doc/inputnumber/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputNumber PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputNumber')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputswitch/pt/PTDoc.vue b/doc/inputswitch/pt/PTDoc.vue
deleted file mode 100644
index 24a84809e..000000000
--- a/doc/inputswitch/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputSwitch
-            v-model="checked"
-            :pt="{
-                slider: ({ props }) => ({
-                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<InputSwitch
-    v-model="checked"
-    :pt="{
-        slider: ({ props }) => ({
-            class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputSwitch
-            v-model="checked"
-            :pt="{
-                slider: ({ props }) => ({
-                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputSwitch
-            v-model="checked"
-            :pt="{
-                slider: ({ props }) => ({
-                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputswitch/pt/index.vue b/doc/inputswitch/pt/index.vue
index 65d839ad0..584d9a293 100644
--- a/doc/inputswitch/pt/index.vue
+++ b/doc/inputswitch/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputSwitch PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputSwitch')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/inputtext/pt/PTDoc.vue b/doc/inputtext/pt/PTDoc.vue
deleted file mode 100644
index 81fac3215..000000000
--- a/doc/inputtext/pt/PTDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputText
-            v-model="value"
-            type="text"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<InputText
-    v-model="value"
-    type="text"
-    :pt="{
-        root: { class: 'border-teal-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputText
-            v-model="value"
-            type="text"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-        
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <InputText
-            v-model="value"
-            type="text"
-            :pt="{
-                root: { class: 'border-teal-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputtext/pt/index.vue b/doc/inputtext/pt/index.vue
index e9b6db7c0..c800812a4 100644
--- a/doc/inputtext/pt/index.vue
+++ b/doc/inputtext/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'InputText PT Options',
                     component: DocApiTable,
                     data: getPTOption('InputText')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/knob/pt/PTDoc.vue b/doc/knob/pt/PTDoc.vue
deleted file mode 100644
index ee22b0874..000000000
--- a/doc/knob/pt/PTDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Knob
-            v-model="value"
-            :pt="{
-                value: { style: { stroke: 'var(--cyan-500)' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0,
-            code: {
-                basic: `
-<Knob
-    v-model="value"
-    :pt="{
-        value: { style: { stroke: 'var(--cyan-500)' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Knob
-            v-model="value"
-            :pt="{
-                value: { style: { stroke: 'var(--cyan-500)' } }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 0
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Knob
-            v-model="value"
-            :pt="{
-                value: { style: { stroke: 'var(--cyan-500)' } }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/knob/pt/index.vue b/doc/knob/pt/index.vue
index 50477735f..e21667a61 100644
--- a/doc/knob/pt/index.vue
+++ b/doc/knob/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Knob PT Options',
                     component: DocApiTable,
                     data: getPTOption('Knob')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/listbox/pt/PTDoc.vue b/doc/listbox/pt/PTDoc.vue
deleted file mode 100644
index cc96b312a..000000000
--- a/doc/listbox/pt/PTDoc.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Listbox
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Listbox
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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-content-center">
-        <Listbox
-            v-model="selectedCity"
-            :options="cities"
-            optionLabel="name"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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/doc/listbox/pt/index.vue b/doc/listbox/pt/index.vue
index a345882da..de1beb154 100644
--- a/doc/listbox/pt/index.vue
+++ b/doc/listbox/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Listbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('Listbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
deleted file mode 100644
index 4b4275c25..000000000
--- a/doc/megamenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,425 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <MegaMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<MegaMenu
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <MegaMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Videos',
-                    icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users',
-                    icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events',
-                    icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <MegaMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Videos',
-        icon: 'pi pi-fw pi-video',
-        items: [
-            [
-                {
-                    label: 'Video 1',
-                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Video 3',
-                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
-                },
-                {
-                    label: 'Video 4',
-                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-users',
-        items: [
-            [
-                {
-                    label: 'User 1',
-                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
-                },
-                {
-                    label: 'User 2',
-                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 3',
-                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
-                },
-                {
-                    label: 'User 4',
-                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'User 5',
-                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
-                },
-                {
-                    label: 'User 6',
-                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            [
-                {
-                    label: 'Event 1',
-                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Event 3',
-                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
-                }
-            ],
-            [
-                {
-                    label: 'Technology 4',
-                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
-                }
-            ]
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/megamenu/pt/index.vue b/doc/megamenu/pt/index.vue
index 9ce90cb18..895c40638 100644
--- a/doc/megamenu/pt/index.vue
+++ b/doc/megamenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'MegaMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('MegaMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
deleted file mode 100644
index ad4db098a..000000000
--- a/doc/menu/pt/PTDoc.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Menu
-            :model="items"
-            :pt="{
-                submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, context }) => ({
-                    class: context.focused ? 'bg-primary-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Options',
-                    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 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<Menu
-    :model="items"
-    :pt="{
-        submenuHeader: { class: 'text-surface-900' },
-        action: ({ props, state, context }) => ({
-            class: context.focused ? 'bg-primary-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Menu
-            :model="items"
-            :pt="{
-                submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, context }) => ({
-                    class: context.focused ? 'bg-primary-400' : undefined
-                })
-            }"
-        />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Options',
-                    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 });
-                            }
-                        }
-                    ]
-                },
-                {
-                    label: 'Navigate',
-                    items: [
-                        {
-                            label: 'Vue Website',
-                            icon: 'pi pi-external-link',
-                            url: 'https://vuejs.org/'
-                        },
-                        {
-                            label: 'Router',
-                            icon: 'pi pi-upload',
-                            to: '/fileupload'
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Menu
-            :model="items"
-            :pt="{
-                submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, context }) => ({
-                    class: context.focused ? 'bg-primary-400' : undefined
-                })
-            }"
-        />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-const items = ref([
-    {
-        label: 'Options',
-        items: [
-            {
-                label: 'Update',
-                icon: 'pi pi-refresh',
-                command: () => {
-                    toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-                }
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-times',
-                command: () => {
-                    toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-                }
-            }
-        ]
-    },
-    {
-        label: 'Navigate',
-        items: [
-            {
-                label: 'Vue Website',
-                icon: 'pi pi-external-link',
-                url: 'https://vuejs.org/'
-            },
-            {
-                label: 'Router',
-                icon: 'pi pi-upload',
-                to: '/fileupload'
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/menu/pt/index.vue b/doc/menu/pt/index.vue
index 9c1bf63c9..8fafa419b 100644
--- a/doc/menu/pt/index.vue
+++ b/doc/menu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Menu PT Options',
                     component: DocApiTable,
                     data: getPTOption('Menu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
deleted file mode 100644
index 54aaf7690..000000000
--- a/doc/menubar/pt/PTDoc.vue
+++ /dev/null
@@ -1,446 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card relative z-2">
-        <Menubar
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<Menubar
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card relative z-2">
-        <Menubar
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card relative z-2">
-        <Menubar
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-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',
-        icon: 'pi pi-fw pi-pencil',
-        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',
-        icon: 'pi pi-fw pi-user',
-        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',
-        icon: 'pi pi-fw pi-calendar',
-        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',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/menubar/pt/index.vue b/doc/menubar/pt/index.vue
index 7bd315444..6176280b6 100644
--- a/doc/menubar/pt/index.vue
+++ b/doc/menubar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Menubar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Menubar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/message/pt/PTDoc.vue b/doc/message/pt/PTDoc.vue
deleted file mode 100644
index ff1cc39b9..000000000
--- a/doc/message/pt/PTDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Message
-            :pt="{
-                root: { class: 'bg-yellow-100' }
-            }"
-        >
-            Message Content
-        </Message>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Message
-    :pt="{
-        root: { class: 'bg-yellow-100' }
-    }"
->
-    Message Content
-</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message
-            :pt="{
-                root: { class: 'bg-yellow-100' }
-            }"
-        >
-            Message Content
-        </Message>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message
-            :pt="{
-                root: { class: 'bg-yellow-100' }
-            }"
-        >
-            Message Content
-        </Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/message/pt/index.vue b/doc/message/pt/index.vue
index ed31eb743..a22ff9ecc 100644
--- a/doc/message/pt/index.vue
+++ b/doc/message/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Message PT Options',
                     component: DocApiTable,
                     data: getPTOption('Message')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/multiselect/pt/PTDoc.vue b/doc/multiselect/pt/PTDoc.vue
deleted file mode 100644
index 5653495df..000000000
--- a/doc/multiselect/pt/PTDoc.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <MultiSelect
-            v-model="selectedCities"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select Cities"
-            :maxSelectedLabels="3"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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"
-    placeholder="Select Cities"
-    :maxSelectedLabels="3"
-    :pt="{
-        root: { class: 'w-full md:w-14rem' },
-        item: ({ props, state, context }) => ({
-            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <MultiSelect
-            v-model="selectedCities"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select Cities"
-            :maxSelectedLabels="3"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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-content-center">
-        <MultiSelect
-            v-model="selectedCities"
-            :options="cities"
-            optionLabel="name"
-            placeholder="Select Cities"
-            :maxSelectedLabels="3"
-            :pt="{
-                root: { class: 'w-full md:w-14rem' },
-                item: ({ props, state, context }) => ({
-                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
-                })
-            }"
-        />
-    </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/doc/multiselect/pt/index.vue b/doc/multiselect/pt/index.vue
index 2ddac9271..c4f6bd142 100644
--- a/doc/multiselect/pt/index.vue
+++ b/doc/multiselect/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'MultiSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('MultiSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
deleted file mode 100644
index 48bbd2dd3..000000000
--- a/doc/orderlist/pt/PTDoc.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                list: { style: { height: 'auto' } },
-                moveUpButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">${{ slotProps.item.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"
-    :pt="{
-        list: { style: { height: 'auto' } },
-        moveUpButton: {
-            root: { class: 'bg-teal-400 border-teal-400' }
-        }
-    }"
->
-    <template #header> List of Products </template>
-    <template #item="slotProps">
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ slotProps.item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ slotProps.item.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-        </div>
-    </template>
-</OrderList>
-`,
-                options: `
-<template>
-    <div class="card xl:flex xl:justify-content-center">
-        <OrderList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                list: { style: { height: 'auto' } },
-                moveUpButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.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 xl:flex xl:justify-content-center">
-        <OrderList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                list: { style: { height: 'auto' } },
-                moveUpButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.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) => (this.products = 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/doc/orderlist/pt/index.vue b/doc/orderlist/pt/index.vue
index 57e52ebfe..a657128bf 100644
--- a/doc/orderlist/pt/index.vue
+++ b/doc/orderlist/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'OrderList PT Options',
                     component: DocApiTable,
                     data: getPTOption('OrderList')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/organizationchart/pt/PTDoc.vue b/doc/organizationchart/pt/PTDoc.vue
deleted file mode 100644
index 2aae3df7b..000000000
--- a/doc/organizationchart/pt/PTDoc.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card overflow-x-auto">
-        <OrganizationChart
-            :value="data"
-            collapsible
-            :pt="{
-                node: ({ context }) => ({
-                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-                })
-            }"
-        >
-            <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"
-    collapsible
-    :pt="{
-        node: ({ context }) => ({
-            class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-        })
-    }"
->
-    <template #default="slotProps">
-        <span>{{ slotProps.node.label }}</span>
-    </template>
-</OrganizationChart>
-`,
-                options: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart
-            :value="data"
-            collapsible
-            :pt="{
-                node: ({ context }) => ({
-                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-                })
-            }"
-        >
-            <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"
-            collapsible
-            :pt="{
-                node: ({ context }) => ({
-                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
-                })
-            }"
-        >
-            <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/doc/organizationchart/pt/index.vue b/doc/organizationchart/pt/index.vue
index 97d76909c..93162e6b3 100644
--- a/doc/organizationchart/pt/index.vue
+++ b/doc/organizationchart/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'OrganizationChart PT Options',
                     component: DocApiTable,
                     data: getPTOption('OrganizationChart')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
deleted file mode 100644
index bb0963f6a..000000000
--- a/doc/overlaypanel/pt/PTDoc.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op" :pt="{ root: { class: 'surface-ground' } }">
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-<OverlayPanel ref="op"
-    :pt="{
-        root: { class: 'surface-ground' }
-    }"
->
-    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-</OverlayPanel>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op"
-            :pt="{
-                root: { class: 'surface-ground' }
-            }"
-        >
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op"
-            :pt="{
-                root: { class: 'surface-ground' }
-            }"
-        >
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const op = ref();
-const toggle = (event) => {
-    op.value.toggle(event);
-}
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        toggle(event) {
-            this.$refs.op.toggle(event);
-        }
-    }
-};
-</script>
diff --git a/doc/overlaypanel/pt/index.vue b/doc/overlaypanel/pt/index.vue
index da9a6389d..ac2aedfa7 100644
--- a/doc/overlaypanel/pt/index.vue
+++ b/doc/overlaypanel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'OverlayPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('OverlayPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/paginator/pt/PTDoc.vue b/doc/paginator/pt/PTDoc.vue
deleted file mode 100644
index 1323885a0..000000000
--- a/doc/paginator/pt/PTDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Paginator
-            :rows="10"
-            :totalRecords="120"
-            :pt="{
-                pageButton: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Paginator
-    :rows="10"
-    :totalRecords="120"
-    :pt="{
-        pageButton: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Paginator
-            :rows="10"
-            :totalRecords="120"
-            :pt="{
-                pageButton: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Paginator
-            :rows="10"
-            :totalRecords="120"
-            :pt="{
-                pageButton: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/paginator/pt/index.vue b/doc/paginator/pt/index.vue
index 290fb27fb..284d9d3ec 100644
--- a/doc/paginator/pt/index.vue
+++ b/doc/paginator/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Paginator PT Options',
                     component: DocApiTable,
                     data: getPTOption('Paginator')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
deleted file mode 100644
index 22bf093f7..000000000
--- a/doc/panel/pt/PTDoc.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card">
-        <Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" 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
-    :pt="{
-        header: { class: 'bg-primary' },
-        title: { class: 'text-white' },
-        toggler: { class: 'text-white hover:bg-primary-reverse' }
-    }">
-    <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
-            :pt="{
-                header: { class: 'bg-primary' },
-                title: { class: 'text-white' },
-                toggler: { class: 'text-white hover:bg-primary-reverse' }
-            }">
-            <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
-            :pt="{
-                header: { class: 'bg-primary' },
-                title: { class: 'text-white' },
-                toggler: { class: 'text-white hover:bg-primary-reverse' }
-            }">
-            <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/doc/panel/pt/index.vue b/doc/panel/pt/index.vue
index 58366e149..81b853aaa 100644
--- a/doc/panel/pt/index.vue
+++ b/doc/panel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Panel PT Options',
                     component: DocApiTable,
                     data: getPTOption('Panel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/panelmenu/pt/PTDoc.vue b/doc/panelmenu/pt/PTDoc.vue
deleted file mode 100644
index 6a427b92c..000000000
--- a/doc/panelmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <PanelMenu
-            :model="items"
-            :pt="{
-                root: { class: 'w-full md:w-25rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            code: {
-                basic: `
-<PanelMenu
-    :model="items"
-    :pt="{
-        root: { class: 'w-full md:w-25rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <PanelMenu
-            :model="items"
-            :pt="{
-                root: { class: 'w-full md:w-25rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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'
-                        },
-                        {
-                            label: 'Export',
-                            icon: 'pi pi-fw pi-external-link'
-                        }
-                    ]
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <PanelMenu
-            :model="items"
-            :pt="{
-                root: { class: 'w-full md:w-25rem' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-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'
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        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',
-        icon: 'pi pi-fw pi-user',
-        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',
-        icon: 'pi pi-fw pi-calendar',
-        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'
-                    }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/panelmenu/pt/index.vue b/doc/panelmenu/pt/index.vue
index f89a29949..381ff4ed7 100644
--- a/doc/panelmenu/pt/index.vue
+++ b/doc/panelmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'PanelMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('PanelMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/password/pt/PTDoc.vue b/doc/password/pt/PTDoc.vue
deleted file mode 100644
index e2977749c..000000000
--- a/doc/password/pt/PTDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Password
-            v-model="value"
-            :pt="{
-                info: { class: 'font-bold' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Password
-    v-model="value"
-    :pt="{
-        info: { class: 'font-bold' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Password
-            v-model="value"
-            :pt="{
-                info: { class: 'font-bold' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Password
-            v-model="value"
-            :pt="{
-                info: { class: 'font-bold' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/password/pt/index.vue b/doc/password/pt/index.vue
index 6bc38dd94..10724ccfe 100644
--- a/doc/password/pt/index.vue
+++ b/doc/password/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Password PT Options',
                     component: DocApiTable,
                     data: getPTOption('Password')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
deleted file mode 100644
index 66e493d1a..000000000
--- a/doc/picklist/pt/PTDoc.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <PickList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                sourceList: { style: { height: '342px' } },
-                targetList: { style: { height: '342px' } },
-                moveAllToTargetButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                },
-                moveAllToSourceButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">${{ slotProps.item.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"
-    :pt="{
-        sourceList: { style: { height: '342px' } },
-        targetList: { style: { height: '342px' } },
-        moveAllToTargetButton: {
-            root: { class: 'bg-teal-400 border-teal-400' }
-        },
-        moveAllToSourceButton: {
-            root: { class: 'bg-teal-400 border-teal-400' }
-        }
-    }"
->
-    <template #sourceheader> Available </template>
-    <template #targetheader> Selected </template>
-    <template #item="slotProps">
-        <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-            <div class="flex-1 flex flex-column gap-2">
-                <span class="font-bold">{{ slotProps.item.name }}</span>
-                <div class="flex align-items-center gap-2">
-                    <i class="pi pi-tag text-sm"></i>
-                    <span>{{ slotProps.item.category }}</span>
-                </div>
-            </div>
-            <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
-        </div>
-    </template>
-</PickList>
-`,
-                options: `
-<template>
-    <div class="card">
-        <PickList
-            v-model="products"
-            dataKey="id"
-            :pt="{
-                sourceList: { style: { height: '342px' } },
-                targetList: { style: { height: '342px' } },
-                moveAllToTargetButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                },
-                moveAllToSourceButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.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"
-            :pt="{
-                sourceList: { style: { height: '342px' } },
-                targetList: { style: { height: '342px' } },
-                moveAllToTargetButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                },
-                moveAllToSourceButton: {
-                    root: { class: 'bg-teal-400 border-teal-400' }
-                }
-            }"
-        >
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-column gap-2">
-                        <span class="font-bold">{{ slotProps.item.name }}</span>
-                        <div class="flex align-items-center gap-2">
-                            <i class="pi pi-tag text-sm"></i>
-                            <span>{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-900">$ {{ slotProps.item.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/doc/picklist/pt/index.vue b/doc/picklist/pt/index.vue
index 7a048e8c0..157a24314 100644
--- a/doc/picklist/pt/index.vue
+++ b/doc/picklist/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'PickList PT Options',
                     component: DocApiTable,
                     data: getPTOption('PickList')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/progressbar/pt/PTDoc.vue b/doc/progressbar/pt/PTDoc.vue
deleted file mode 100644
index b35b2902c..000000000
--- a/doc/progressbar/pt/PTDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card">
-        <ProgressBar
-            :value="50"
-            :pt="{
-                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressBar :value="50"
-    :pt="{
-        value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-    }" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"
-            :pt="{
-                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-            }" />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"
-            :pt="{
-                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-            }" />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/progressbar/pt/index.vue b/doc/progressbar/pt/index.vue
index 3acb4d6ce..896382c54 100644
--- a/doc/progressbar/pt/index.vue
+++ b/doc/progressbar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ProgressBar PT Options',
                     component: DocApiTable,
                     data: getPTOption('ProgressBar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/progressspinner/pt/PTDoc.vue b/doc/progressspinner/pt/PTDoc.vue
deleted file mode 100644
index 0da8386d3..000000000
--- a/doc/progressspinner/pt/PTDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <div class="card flex justify-content-center">
-        <ProgressSpinner
-            :pt="{
-                spinner: { style: { animationDuration: '0s' } },
-                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ProgressSpinner
-    :pt="{
-        spinner: { style: { animationDuration: '0s' } },
-        circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ProgressSpinner
-            :pt="{
-                spinner: { style: { animationDuration: '0s' } },
-                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ProgressSpinner
-            :pt="{
-                spinner: { style: { animationDuration: '0s' } },
-                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/progressspinner/pt/index.vue b/doc/progressspinner/pt/index.vue
index 70e2b897e..3d5d7b23f 100644
--- a/doc/progressspinner/pt/index.vue
+++ b/doc/progressspinner/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ProgressSpinner PT Options',
                     component: DocApiTable,
                     data: getPTOption('ProgressSpinner')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/radiobutton/pt/PTDoc.vue b/doc/radiobutton/pt/PTDoc.vue
deleted file mode 100644
index bb79f3cc3..000000000
--- a/doc/radiobutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton
-                    v-model="selectedCategory"
-                    :inputId="category.key"
-                    name="pizza"
-                    :value="category.name"
-                    :pt="{
-                        input: ({ props }) => ({
-                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-                        })
-                    }"
-                />
-                <label :for="category.key" class="ml-2">{{ 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, index) in categories" :key="category.key" class="flex align-items-center">
-    <RadioButton
-        v-model="selectedCategory"
-        :inputId="category.key"
-        name="pizza"
-        :value="category.name"
-        :pt="{
-            input: ({ props }) => ({
-                class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-            })
-        }"
-    />
-    <label :for="category.key" class="ml-2">{{ category.name }}</label>
-</div>
-
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton
-                    v-model="selectedCategory"
-                    :inputId="category.key"
-                    name="pizza"
-                    :value="category.name"
-                    :pt="{
-                        input: ({ props }) => ({
-                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-                        })
-                    }"
-                />
-                <label :for="category.key" class="ml-2">{{ 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-content-center">
-        <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton
-                    v-model="selectedCategory"
-                    :inputId="category.key"
-                    name="pizza"
-                    :value="category.name"
-                    :pt="{
-                        input: ({ props }) => ({
-                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
-                        })
-                    }"
-                />
-                <label :for="category.key" class="ml-2">{{ 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/doc/radiobutton/pt/index.vue b/doc/radiobutton/pt/index.vue
index 7ae715972..c88388e1e 100644
--- a/doc/radiobutton/pt/index.vue
+++ b/doc/radiobutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'RadioButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('RadioButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
deleted file mode 100644
index aa71f489a..000000000
--- a/doc/rating/pt/PTDoc.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Rating
-            v-model="value"
-            :pt="{
-                onIcon: { class: 'text-orange-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Rating
-    v-model="value"
-    :pt="{
-        onIcon: { class: 'text-orange-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Rating
-            v-model="value"
-            :pt="{
-                onIcon: { class: 'text-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Rating
-            v-model="value"
-            :pt="{
-                onIcon: { class: 'text-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/rating/pt/index.vue b/doc/rating/pt/index.vue
index 2c8d4fd05..be33f3d52 100644
--- a/doc/rating/pt/index.vue
+++ b/doc/rating/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Rating PT Options',
                     component: DocApiTable,
                     data: getPTOption('Rating')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/ripple/pt/PTDoc.vue b/doc/ripple/pt/PTDoc.vue
deleted file mode 100644
index 02db2a30d..000000000
--- a/doc/ripple/pt/PTDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center align-items-center">
-        <div
-            v-ripple="{
-                pt: {
-                    root: 'bg-yellow-400'
-                }
-            }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
-        >
-            Default
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div
-    v-ripple="{
-        pt: {
-            root: 'bg-yellow-400'
-        }
-    }"
-    class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
->
-    Default
-</div>
-`,
-                options: `
-<template>
-    <div class="card card-container flex justify-content-center align-items-center">
-        <div
-            v-ripple="{
-                pt: {
-                    root: 'bg-yellow-400'
-                }
-            }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
-        >
-            Default
-        </div>
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card card-container flex justify-content-center align-items-center">
-        <div
-            v-ripple="{
-                pt: {
-                    root: 'bg-yellow-400'
-                }
-            }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
-        >
-            Default
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/ripple/pt/index.vue b/doc/ripple/pt/index.vue
index b78b713be..606a606ad 100644
--- a/doc/ripple/pt/index.vue
+++ b/doc/ripple/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Ripple PT Options',
                     component: DocApiTable,
                     data: getPTOption('Ripple')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/scrollpanel/pt/PTDoc.vue b/doc/scrollpanel/pt/PTDoc.vue
deleted file mode 100644
index 67af86d3a..000000000
--- a/doc/scrollpanel/pt/PTDoc.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <ScrollPanel :pt="{ root: { style: { width: '100%', height: '200px' } }, bary: { class: 'bg-primary' } }">
-            <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
-    :pt="{
-        root: { 
-            style: { width: '100%', height: '200px' }
-        },
-        barY: { class: 'bg-primary' }
-    }">
-    <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>
-`,
-                options: `
-<template>
-    <div class="card">
-        <ScrollPanel
-            :pt="{
-                root: { 
-                    style: { width: '100%', height: '200px' }
-                },
-                barY: { class: 'bg-primary' }
-            }">
-            <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>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <ScrollPanel
-            :pt="{
-                root: { 
-                    style: { width: '100%', height: '200px' }
-                },
-                barY: { class: 'bg-primary' }
-            }">
-            <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>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/scrollpanel/pt/index.vue b/doc/scrollpanel/pt/index.vue
index 7964242ca..76eb2aa26 100644
--- a/doc/scrollpanel/pt/index.vue
+++ b/doc/scrollpanel/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ScrollPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('ScrollPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/scrolltop/pt/PTDoc.vue b/doc/scrolltop/pt/PTDoc.vue
deleted file mode 100644
index d4751e06b..000000000
--- a/doc/scrolltop/pt/PTDoc.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-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" :pt="{ root: { class: 'w-2rem h-2rem bg-primary' }, icon: { class: 'w-1rem h-1rem' } }" />
-        </ScrollPanel>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ScrollTop target="parent"
-    :pt="{ 
-        root: { class: 'w-2rem h-2rem bg-primary' },
-        icon: { class: 'w-1rem h-1rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-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"
-                :pt="{ 
-                    root: { class: 'w-2rem h-2rem bg-primary' },
-                    icon: { class: 'w-1rem h-1rem' }
-                }"
-            />
-        </ScrollPanel>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-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"
-                :pt="{ 
-                    root: { class: 'w-2rem h-2rem bg-primary' },
-                    icon: { class: 'w-1rem h-1rem' }
-                }"
-            />
-        </ScrollPanel>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/scrolltop/pt/index.vue b/doc/scrolltop/pt/index.vue
index ceb706801..c9a413df7 100644
--- a/doc/scrolltop/pt/index.vue
+++ b/doc/scrolltop/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ScrollTop PT Options',
                     component: DocApiTable,
                     data: getPTOption('ScrollTop')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
deleted file mode 100644
index 9864819f0..000000000
--- a/doc/selectbutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <SelectButton
-            v-model="value"
-            :options="options"
-            aria-labelledby="basic"
-            :pt="{
-                button: ({ context }) => ({
-                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'Off',
-            options: ['Off', 'On'],
-            code: {
-                basic: `
-<SelectButton
-    v-model="value"
-    :options="options"
-    aria-labelledby="basic"
-    :pt="{
-        button: ({ context }) => ({
-            class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <SelectButton
-            v-model="value"
-            :options="options"
-            aria-labelledby="basic"
-            :pt="{
-                button: ({ context }) => ({
-                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: 'off',
-            options: ['Off', 'On']
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <SelectButton
-            v-model="value"
-            :options="options"
-            aria-labelledby="basic"
-            :pt="{
-                button: ({ context }) => ({
-                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('off');
-const options = ref(['Off', 'On']);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/selectbutton/pt/index.vue b/doc/selectbutton/pt/index.vue
index c52069d25..ab39cb9a4 100644
--- a/doc/selectbutton/pt/index.vue
+++ b/doc/selectbutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'SelectButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('SelectButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
deleted file mode 100644
index 99401d371..000000000
--- a/doc/sidebar/pt/PTDoc.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" header="Sidebar" :pt="{ root: { class: 'w-25rem' } }">
-            <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>
-        </Sidebar>
-        <Button icon="pi pi-arrow-right" @click="visible = true" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            code: {
-                basic: `
-<Sidebar v-model:visible="visible"
-    header="Sidebar"
-    :pt="{
-        root: { class: 'w-25rem' }
-    }"
->
-    <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>
-</Sidebar>
-<Button icon="pi pi-arrow-right" @click="visible = true" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible"
-            header="Sidebar"
-            :pt="{
-                root: { class: 'w-25rem' }
-            }"
-        >
-            <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>
-        </Sidebar>
-        <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-content-center">
-        <Sidebar v-model:visible="visible"
-            header="Sidebar"
-            :pt="{
-                root: { class: 'w-25rem' }
-            }"
-        >
-            <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>
-        </Sidebar>
-        <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/doc/sidebar/pt/index.vue b/doc/sidebar/pt/index.vue
index 326142c7a..7485585fc 100644
--- a/doc/sidebar/pt/index.vue
+++ b/doc/sidebar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Sidebar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Sidebar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/skeleton/pt/PTDoc.vue b/doc/skeleton/pt/PTDoc.vue
deleted file mode 100644
index f7c977cd4..000000000
--- a/doc/skeleton/pt/PTDoc.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Skeleton :pt="{ root: { class: 'w-3rem h-3rem' } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Skeleton
-    :pt="{
-        root: { class: 'w-3rem h-3rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <Skeleton
-        :pt="{
-            root: { class: 'w-3rem h-3rem' }
-        }"
-    />
-</template>
-`,
-                composition: `
-<template>
-    <Skeleton
-        :pt="{
-            root: { class: 'w-3rem h-3rem' }
-        }"
-    />
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/skeleton/pt/index.vue b/doc/skeleton/pt/index.vue
index 07c7f51d7..ea296e2a3 100644
--- a/doc/skeleton/pt/index.vue
+++ b/doc/skeleton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Skeleton PT Options',
                     component: DocApiTable,
                     data: getPTOption('Skeleton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
deleted file mode 100644
index ff694b64c..000000000
--- a/doc/slider/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Slider
-            v-model="value"
-            :pt="{
-                root: { class: 'w-14rem' },
-                handle: { class: 'bg-orange-400 border-900' },
-                range: { class: 'bg-orange-400' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<Slider
-    v-model="value"
-    :pt="{
-        root: { class: 'w-14rem' },
-        handle: { class: 'bg-orange-400 border-900' },
-        range: { class: 'bg-orange-400' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Slider
-            v-model="value"
-            :pt="{
-                root: { class: 'w-14rem' },
-                handle: { class: 'bg-orange-400 border-900' },
-                range: { class: 'bg-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Slider
-            v-model="value"
-            :pt="{
-                root: { class: 'w-14rem' },
-                handle: { class: 'bg-orange-400 border-900' },
-                range: { class: 'bg-orange-400' }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/slider/pt/index.vue b/doc/slider/pt/index.vue
index b70472fae..62eb80b84 100644
--- a/doc/slider/pt/index.vue
+++ b/doc/slider/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Slider PT Options',
                     component: DocApiTable,
                     data: getPTOption('Slider')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/speeddial/pt/PTDoc.vue b/doc/speeddial/pt/PTDoc.vue
deleted file mode 100644
index 65c7643c8..000000000
--- a/doc/speeddial/pt/PTDoc.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '300px' }">
-            <SpeedDial
-                :model="items"
-                direction="down"
-                :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-                :pt="{
-                    action: ({ props, state, context }) => ({
-                        class: context.active ? 'bg-primary' : undefined
-                    })
-                }"
-            />
-        </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' });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    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="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '300px' }">
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-                :pt="{
-                    action: ({ props, state, context }) => ({
-                        class: context.active ? 'bg-primary' : undefined
-                    })
-                }"
-            />
-        </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' });
-                    }
-                },
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-trash',
-                    command: () => {
-                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    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: '300px' }">
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
-                :pt="{
-                    action: ({ props, state, context }) => ({
-                        class: context.active ? 'bg-primary' : undefined
-                    })
-                }"
-            />
-        </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' });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-        }
-    },
-    {
-        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/doc/speeddial/pt/index.vue b/doc/speeddial/pt/index.vue
index eb4273654..6414ad4a3 100644
--- a/doc/speeddial/pt/index.vue
+++ b/doc/speeddial/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'SpeedDial PT Options',
                     component: DocApiTable,
                     data: getPTOption('SpeedDial')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
deleted file mode 100644
index bca26444f..000000000
--- a/doc/splitbutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <SplitButton
-            label="Save"
-            @click="save"
-            :model="items"
-            :pt="{
-                menu: {
-                    root: { class: 'surface-ground' }
-                }
-            }"
-        />
-    </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 });
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
-            ],
-            code: {
-                basic: `
-<SplitButton label="Save"
-    @click="save"
-    :model="items"
-    :pt="{
-        menu: {
-            root: { class: 'surface-ground' }
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <SplitButton
-            label="Save"
-            icon="pi pi-plus"
-            @click="save"
-            :model="items"
-            :pt="{
-                menu: {
-                    root: { class: 'surface-ground' }
-                }
-            }"
-        />
-    </div>
-    <Toast />
-</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 });
-                    }
-                },
-                {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
-                    command: () => {
-                        window.location.href = 'https://vuejs.org/';
-                    }
-                },
-                { label: 'Upload', icon: 'pi pi-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-content-center">
-        <SplitButton
-            label="Save"
-            icon="pi pi-plus"
-            @click="save"
-            :model="items"
-            :pt="{
-                menu: {
-                    root: { class: 'surface-ground' }
-                }
-            }"
-        />
-    </div>
-    <Toast />
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
-];
-
-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/doc/splitbutton/pt/index.vue b/doc/splitbutton/pt/index.vue
index 35b9a21bd..adaba446b 100644
--- a/doc/splitbutton/pt/index.vue
+++ b/doc/splitbutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'SplitButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('SplitButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/splitter/pt/PTDoc.vue b/doc/splitter/pt/PTDoc.vue
deleted file mode 100644
index 5d831916f..000000000
--- a/doc/splitter/pt/PTDoc.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Splitter :pt="{ root: { style: { height: '300px' } }, gutterHandler: { class: 'bg-primary' } }">
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Splitter
-    :pt="{
-        root: { style: { height: '300px' } },
-        gutterHandler: { class: 'bg-primary' }
-    }">
-    <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-    <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-</Splitter>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Splitter
-            :pt="{
-                root: { style: { height: '300px' } },
-                gutterHandler: { class: 'bg-primary' }
-            }">
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Splitter
-            :pt="{
-                root: { style: { height: '300px' } },
-                gutterHandler: { class: 'bg-primary' }
-            }">
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
-            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/splitter/pt/index.vue b/doc/splitter/pt/index.vue
index 17f7ba902..33e5c8177 100644
--- a/doc/splitter/pt/index.vue
+++ b/doc/splitter/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'SplitterPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('SplitterPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/steps/pt/PTDoc.vue b/doc/steps/pt/PTDoc.vue
deleted file mode 100644
index 7687e9b87..000000000
--- a/doc/steps/pt/PTDoc.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Steps
-            :model="items"
-            :readonly="false"
-            :pt="{
-                root: { class: 'w-30rem' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal',
-                    to: '/steps'
-                },
-                {
-                    label: 'Seat',
-                    to: '/steps/seat'
-                },
-                {
-                    label: 'Payment',
-                    to: '/steps/payment'
-                },
-                {
-                    label: 'Confirmation',
-                    to: '/steps/confirmation'
-                }
-            ],
-            code: {
-                basic: `
-<Steps
-    :model="items"
-    :readonly="false"
-    :pt="{
-        root: { class: 'w-30rem' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div>        
-        <div class="card">
-            <Steps
-                :model="items"
-                :readonly="false"
-                :pt="{
-                    root: { class: 'w-30rem' }
-                }"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal',
-                    to: '/'
-                },
-                {
-                    label: 'Seat',
-                    to: '/seat'
-                },
-                {
-                    label: 'Payment',
-                    to: '/payment'
-                },
-                {
-                    label: 'Confirmation',
-                    to: '/confirmation'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div>
-        <div class="card">
-            <Steps
-                :model="items"
-                :readonly="false"
-                :pt="{
-                    root: { class: 'w-30rem' }
-                }"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal',
-        to: "/"
-    },
-    {
-        label: 'Seat',
-        to: "/seat",
-    },
-    {
-        label: 'Payment',
-        to: "/payment",
-    },
-    {
-        label: 'Confirmation',
-        to: "/confirmation",
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/steps/pt/index.vue b/doc/steps/pt/index.vue
index ced2c0a2d..9575a05b1 100644
--- a/doc/steps/pt/index.vue
+++ b/doc/steps/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Steps PT Options',
                     component: DocApiTable,
                     data: getPTOption('Steps')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
deleted file mode 100644
index e867b9999..000000000
--- a/doc/tabmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <TabMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
-            ],
-            code: {
-                basic: `
-<TabMenu
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Home',
-                    icon: 'pi pi-fw pi-home'
-                },
-                {
-                    label: 'Calendar',
-                    icon: 'pi pi-fw pi-calendar'
-                },
-                {
-                    label: 'Edit',
-                    icon: 'pi pi-fw pi-pencil'
-                },
-                {
-                    label: 'Documentation',
-                    icon: 'pi pi-fw pi-file'
-                },
-                {
-                    label: 'Settings',
-                    icon: 'pi pi-fw pi-cog'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Home',
-        icon: 'pi pi-fw pi-home'
-    },
-    {
-        label: 'Calendar',
-        icon: 'pi pi-fw pi-calendar'
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil'
-    },
-    {
-        label: 'Documentation',
-        icon: 'pi pi-fw pi-file'
-    },
-    {
-        label: 'Settings',
-        icon: 'pi pi-fw pi-cog'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tabmenu/pt/index.vue b/doc/tabmenu/pt/index.vue
index daff110df..86abbbf60 100644
--- a/doc/tabmenu/pt/index.vue
+++ b/doc/tabmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TabMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('TabMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tabview/pt/PTDoc.vue b/doc/tabview/pt/PTDoc.vue
deleted file mode 100644
index 85d9aa96a..000000000
--- a/doc/tabview/pt/PTDoc.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <TabView>
-            <TabPanel
-                v-for="(tab, index) in tabs"
-                :key="tab.title"
-                :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }"
-            >
-                <p>{{ tab.content }}</p>
-            </TabPanel>
-        </TabView>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: `Header ${i + 1}`,
-                content: `Tab ${i + 1} Content`
-            })),
-            code: {
-                basic: `
-<TabView>
-    <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-        :pt="{
-            headerAction: ({ props, parent }) => ({
-                class: panelClass(props, parent, index)
-            })
-        }">
-        <p>{{ tab.content }}</p>
-    </TabPanel>
-</TabView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabView>
-            <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headerAction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </TabPanel>
-        </TabView>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            tabs: Array.from({ length: 3 }, (_, i) => ({
-                title: \`Header \${i + 1}\`,
-                content: \`Tab \${i + 1} Content\`
-            }))
-        }
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabView>
-            <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
-                :pt="{
-                    headeraction: ({ props, parent }) => ({
-                        class: panelClass(props, parent, index)
-                    })
-                }">
-                <p>{{ tab.content }}</p>
-            </TabPanel>
-        </TabView>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
-    title: \`Header \${i + 1}\`,
-    content: \`Tab \${i + 1} Content\`
-})));
-
-const panelClass = (props, parent, index) => {
-    return [
-        {
-            'bg-primary': parent.state.d_activeIndex === index
-        }
-    ];
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
-    }
-};
-</script>
diff --git a/doc/tabview/pt/index.vue b/doc/tabview/pt/index.vue
index ac7ad9adc..c26073919 100644
--- a/doc/tabview/pt/index.vue
+++ b/doc/tabview/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'TabPanel PT Options',
                     component: DocApiTable,
                     data: getPTOption('TabPanel')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tag/pt/PTDoc.vue b/doc/tag/pt/PTDoc.vue
deleted file mode 100644
index 44d220f56..000000000
--- a/doc/tag/pt/PTDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tag icon="pi pi-user" value="Waiting" :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Tag icon="pi pi-user" value="Waiting"
-    :pt="{
-        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tag icon="pi pi-user" value="Waiting"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }"
-        />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tag icon="pi pi-user" value="Waiting"
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }"
-        />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tag/pt/index.vue b/doc/tag/pt/index.vue
index f9199aff0..c19db2f9a 100644
--- a/doc/tag/pt/index.vue
+++ b/doc/tag/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Tag PT Options',
                     component: DocApiTable,
                     data: getPTOption('Tag')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/terminal/pt/PTDoc.vue b/doc/terminal/pt/PTDoc.vue
deleted file mode 100644
index 0214e0956..000000000
--- a/doc/terminal/pt/PTDoc.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" :level="2" />
-    <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 $"
-            :pt="{
-                root: { class: 'surface-900 text-white' },
-                command: { class: 'text-blue-500' },
-                prompt: { class: 'text-yellow-500' },
-                response: { class: 'text-purple-500' }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import TerminalService from 'primevue/terminalservice';
-
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Terminal
-    welcomeMessage="Welcome to PrimeVue"
-    prompt="primevue $"
-    :pt="{
-        root: { class: 'surface-900 text-white' },
-        command: { class: 'text-blue-500' },
-        prompt: { class: 'text-yellow-500' },
-        response: { class: 'text-purple-500' }
-    }"
-/>
-`,
-                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 $"
-            :pt="{
-                root: { class: 'surface-900 text-white' },
-                command: { class: 'text-blue-500' },
-                prompt: { class: 'text-yellow-500' },
-                response: { class: 'text-purple-500' }
-            }"
-        />
-    </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 $"
-            :pt="{
-                root: { class: 'surface-900 text-white' },
-                command: { class: 'text-blue-500' },
-                prompt: { class: 'text-yellow-500' },
-                response: { class: 'text-purple-500' }
-            }"
-        />
-    </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/doc/terminal/pt/index.vue b/doc/terminal/pt/index.vue
index 8dd3e250d..3ea4e7357 100644
--- a/doc/terminal/pt/index.vue
+++ b/doc/terminal/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Terminal PT Options',
                     component: DocApiTable,
                     data: getPTOption('Terminal')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/textarea/pt/PTDoc.vue b/doc/textarea/pt/PTDoc.vue
deleted file mode 100644
index df3637747..000000000
--- a/doc/textarea/pt/PTDoc.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Textarea
-            v-model="value"
-            :pt="{
-                root: {
-                    rows: 5,
-                    cols: 30
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                basic: `
-<Textarea
-    v-model="value"
-    :pt="{
-        root: {
-            rows: 5,
-            cols: 30
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Textarea
-            v-model="value"
-            :pt="{
-                root: {
-                    rows: 5,
-                    cols: 30
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: ''
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Textarea
-            v-model="value"
-            :pt="{
-                root: {
-                    rows: 5,
-                    cols: 30
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/textarea/pt/index.vue b/doc/textarea/pt/index.vue
index 85ac92e35..f8f270e20 100644
--- a/doc/textarea/pt/index.vue
+++ b/doc/textarea/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Textarea PT Options',
                     component: DocApiTable,
                     data: getPTOption('Textarea')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
deleted file mode 100644
index 9477aeff4..000000000
--- a/doc/tieredmenu/pt/PTDoc.vue
+++ /dev/null
@@ -1,455 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <TieredMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ],
-            code: {
-                basic: `
-<TieredMenu
-    :model="items"
-    :pt="{
-        action: ({ props, state, context }) => ({
-            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <TieredMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'File',
-                    icon: 'pi pi-fw pi-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',
-                    icon: 'pi pi-fw pi-pencil',
-                    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',
-                    icon: 'pi pi-fw pi-user',
-                    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',
-                    icon: 'pi pi-fw pi-calendar',
-                    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'
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    separator: true
-                },
-                {
-                    label: 'Quit',
-                    icon: 'pi pi-fw pi-power-off'
-                }
-            ]
-        };
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <TieredMenu
-            :model="items"
-            :pt="{
-                action: ({ props, state, context }) => ({
-                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
-                })
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-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',
-        icon: 'pi pi-fw pi-pencil',
-        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',
-        icon: 'pi pi-fw pi-user',
-        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',
-        icon: 'pi pi-fw pi-calendar',
-        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'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tieredmenu/pt/index.vue b/doc/tieredmenu/pt/index.vue
index bc4681d5b..186157a65 100644
--- a/doc/tieredmenu/pt/index.vue
+++ b/doc/tieredmenu/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TieredMenu PT Options',
                     component: DocApiTable,
                     data: getPTOption('TieredMenu')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/timeline/pt/PTDoc.vue b/doc/timeline/pt/PTDoc.vue
deleted file mode 100644
index 74567dba9..000000000
--- a/doc/timeline/pt/PTDoc.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <Timeline
-            :value="events"
-            :pt="{
-                marker: { class: 'border-orange-400' }
-            }"
-        >
-            <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"
-    :pt="{
-        marker: { class: 'border-orange-400' }
-    }"
->
-    <template #content="slotProps">
-        {{ slotProps.item.status }}
-    </template>
-</Timeline>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Timeline
-            :value="events"
-            :pt="{
-                marker: { class: 'border-orange-400' }
-            }"
-        >
-            <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"
-            :pt="{
-                marker: { class: 'border-orange-400' }
-            }"
-        >
-            <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/doc/timeline/pt/index.vue b/doc/timeline/pt/index.vue
index 7a795590f..2c30df927 100644
--- a/doc/timeline/pt/index.vue
+++ b/doc/timeline/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Timeline PT Options',
                     component: DocApiTable,
                     data: getPTOption('Timeline')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/toast/pt/PTDoc.vue b/doc/toast/pt/PTDoc.vue
deleted file mode 100644
index 8408c7397..000000000
--- a/doc/toast/pt/PTDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Toast
-            group="pt"
-            :pt="{
-                container: { class: 'bg-yellow-100' }
-            }"
-        />
-        <Button label="Show" @click="show()" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Toast
-    group="pt"
-    :pt="{
-        container: { class: 'bg-yellow-100' }
-    }"
-/>
-<Button label="Show" @click="show()" />
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Toast
-            group="pt"
-            :pt="{
-                container: { class: 'bg-yellow-100' }
-            }"
-        />
-        <Button label="Show" @click="show()" />
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Toast
-            group="pt"
-            :pt="{
-                container: { class: 'bg-yellow-100' }
-            }"
-        />
-        <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', group: 'pt', life: 3000 });
-};
-<\/script>
-`
-            }
-        };
-    },
-    methods: {
-        show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
-        }
-    }
-};
-</script>
diff --git a/doc/toast/pt/index.vue b/doc/toast/pt/index.vue
index b92e88beb..530cab834 100644
--- a/doc/toast/pt/index.vue
+++ b/doc/toast/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Toast PT Options',
                     component: DocApiTable,
                     data: getPTOption('Toast')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
deleted file mode 100644
index ae38bfcfe..000000000
--- a/doc/togglebutton/pt/PTDoc.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <ToggleButton
-            v-model="checked"
-            :pt="{
-                root: {
-                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                }
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false,
-            code: {
-                basic: `
-<ToggleButton
-    v-model="checked"
-    :pt="{
-        root: {
-            class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <ToggleButton
-            v-model="checked"
-            :pt="{
-                root: {
-                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checked: false
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ToggleButton
-            v-model="checked"
-            :pt="{
-                root: {
-                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
-                }
-            }"
-        />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/togglebutton/pt/index.vue b/doc/togglebutton/pt/index.vue
index 33c500bb2..614488d49 100644
--- a/doc/togglebutton/pt/index.vue
+++ b/doc/togglebutton/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'ToggleButton PT Options',
                     component: DocApiTable,
                     data: getPTOption('ToggleButton')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
deleted file mode 100644
index 5e8ba87ae..000000000
--- a/doc/toolbar/pt/PTDoc.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card">
-        <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-help" />
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<TabView>
-    <Toolbar
-        :pt="{
-            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-        }">
-        <template #start>
-            <Button label="New" icon="pi pi-plus" class="p-button-help" />
-        </template>
-
-        <template #end>
-            <Button icon="pi pi-search" class="mr-2" />
-            <Button icon="pi pi-times" severity="danger" />
-        </template>
-    </Toolbar>
-</TabView>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Toolbar
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }">
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-help" />
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Toolbar
-            :pt="{
-                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
-            }">
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-help" />
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/toolbar/pt/index.vue b/doc/toolbar/pt/index.vue
index 9b4e4a46f..9b3f41fa4 100644
--- a/doc/toolbar/pt/index.vue
+++ b/doc/toolbar/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Toolbar PT Options',
                     component: DocApiTable,
                     data: getPTOption('Toolbar')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
deleted file mode 100644
index 2a4ced1f1..000000000
--- a/doc/tooltip/pt/PTDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-wrap justify-content-center gap-2">
-        <InputText
-            v-tooltip.right="{
-                value: `PrimeVue Rocks!`,
-                pt: {
-                    text: 'bg-primary'
-                }
-            }"
-            type="text"
-            placeholder="PassThrough Tooltip"
-        />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<InputText
-    v-tooltip.right="{
-        value: \`PrimeVue Rocks!\`,
-        pt: {
-            arrow: {
-                style: {
-                    borderRightColor: 'var(--primary-color)'
-                }
-            },
-            text: 'bg-primary font-medium'
-        }
-    }"
-    type="text"
-    placeholder="PassThrough Tooltip"
-/>
-`,
-                options: `<div class="card flex flex-wrap justify-content-center gap-2">
-    <InputText
-        v-tooltip.right="{
-            value: \`PrimeVue Rocks!\`,
-            pt: {
-                arrow: {
-                    style: {
-                        borderRightColor: 'var(--primary-color)'
-                    }
-                },
-                text: 'bg-primary font-medium'
-            }
-        }"
-        type="text"
-        placeholder="PassThrough Tooltip"
-    />
-</div>
-`,
-                composition: `
-                <div class="card flex flex-wrap justify-content-center gap-2">
-    <InputText
-        v-tooltip.right="{
-            value: \`PrimeVue Rocks!\`,
-            pt: {
-                arrow: {
-                    style: {
-                        borderRightColor: 'var(--primary-color)'
-                    }
-                },
-                text: 'bg-primary font-medium'
-            }
-        }"
-        type="text"
-        placeholder="PassThrough Tooltip"
-    />
-</div>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tooltip/pt/index.vue b/doc/tooltip/pt/index.vue
index aef79610a..4d916c823 100644
--- a/doc/tooltip/pt/index.vue
+++ b/doc/tooltip/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Tooltip PT Options',
                     component: DocApiTable,
                     data: getPTOption('Tooltip')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tree/pt/PTDoc.vue b/doc/tree/pt/PTDoc.vue
deleted file mode 100644
index 9eb6c6916..000000000
--- a/doc/tree/pt/PTDoc.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <Tree
-            :value="nodes"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                content: ({ props, state, context }) => ({
-                    class: context.expanded ? 'bg-blue-100' : 'undefined'
-                })
-            }"
-        />
-    </div>
-    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<Tree
-    :value="nodes"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' },
-        content: ({ props, state, context }) => ({
-            class: context.expanded ? 'bg-blue-100' : 'undefined'
-        })
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Tree
-            :value="nodes"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                content: ({ props, state, context }) => ({
-                    class: context.expanded ? 'bg-blue-100' : 'undefined'
-                })
-            }"
-        />
-    </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 flex justify-content-center">
-        <Tree
-            :value="nodes"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                content: ({ props, state, context }) => ({
-                    class: context.expanded ? 'bg-blue-100' : 'undefined'
-                })
-            }"
-        />
-    </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/doc/tree/pt/index.vue b/doc/tree/pt/index.vue
index 569166de0..2b8c6e285 100644
--- a/doc/tree/pt/index.vue
+++ b/doc/tree/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'Tree PT Options',
                     component: DocApiTable,
                     data: getPTOption('Tree')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/treeselect/pt/PTDoc.vue b/doc/treeselect/pt/PTDoc.vue
deleted file mode 100644
index 9e130397b..000000000
--- a/doc/treeselect/pt/PTDoc.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <TreeSelect
-            v-model="selectedValue"
-            :options="nodes"
-            placeholder="Select Item"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ props, state, context }) => ({
-                        class: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }"
-        />
-    </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"
-    :pt="{
-        root: { class: 'w-full md:w-30rem' },
-        tree: {
-            content: ({ props, state, context }) => ({
-                class: context.expanded ? 'bg-blue-100' : 'undefined'
-            })
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <TreeSelect
-            v-model="selectedValue"
-            :options="nodes"
-            placeholder="Select Item"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ props, state, context }) => ({
-                        class: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }"
-        />
-    </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-content-center">
-        <TreeSelect
-            v-model="selectedValue"
-            :options="nodes"
-            placeholder="Select Item"
-            :pt="{
-                root: { class: 'w-full md:w-30rem' },
-                tree: {
-                    content: ({ props, state, context }) => ({
-                        class: context.expanded ? 'bg-blue-100' : 'undefined'
-                    })
-                }
-            }"
-        />
-    </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/doc/treeselect/pt/index.vue b/doc/treeselect/pt/index.vue
index 114251b1b..0f5b05b39 100644
--- a/doc/treeselect/pt/index.vue
+++ b/doc/treeselect/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TreeSelect PT Options',
                     component: DocApiTable,
                     data: getPTOption('TreeSelect')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/treetable/pt/PTDoc.vue b/doc/treetable/pt/PTDoc.vue
deleted file mode 100644
index b9394bb6a..000000000
--- a/doc/treetable/pt/PTDoc.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                expander
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="size"
-                header="Size"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="type"
-                header="Type"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-        </TreeTable>
-    </div>
-    <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">
-    <Column
-        field="name"
-        header="Name"
-        sortable
-        expander
-        :pt="{
-            sortBadge: { class: 'text-orange-400' }
-        }"
-    />
-    <Column
-        field="size"
-        header="Size"
-        sortable
-        :pt="{
-            sortBadge: { class: 'text-orange-400' }
-        }"
-    />
-    <Column
-        field="type"
-        header="Type"
-        sortable
-        :pt="{
-            sortBadge: { class: 'text-orange-400' }
-        }"
-    />
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                expander
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="size"
-                header="Size"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="type"
-                header="Type"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-        </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">
-            <Column
-                field="name"
-                header="Name"
-                sortable
-                expander
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="size"
-                header="Size"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-            <Column
-                field="type"
-                header="Type"
-                sortable
-                :pt="{
-                    sortBadge: { class: 'text-orange-400' }
-                }"
-            />
-        </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' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-};
-</script>
diff --git a/doc/treetable/pt/index.vue b/doc/treetable/pt/index.vue
index 27336526d..a7f19f064 100644
--- a/doc/treetable/pt/index.vue
+++ b/doc/treetable/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -34,11 +33,6 @@ export default {
                     label: 'Column PT Options',
                     component: DocApiTable,
                     data: getPTOption('Column')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
deleted file mode 100644
index 7ba213eaa..000000000
--- a/doc/tristatecheckbox/pt/PTDoc.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox
-            v-model="value"
-            :pt="{
-                checkbox: {
-                    class: value ? 'bg-teal-500 border-white' : undefined
-                }
-            }"
-        />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null,
-            code: {
-                basic: `
-<TriStateCheckbox
-    v-model="value"
-    :pt="{
-        checkbox: {
-            class: value ? 'bg-teal-500 border-white' : undefined
-        }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox
-            v-model="value"
-            :pt="{
-                checkbox: {
-                    class: value ? 'bg-teal-500 border-white' : undefined
-                }
-            }"
-        />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>  
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: null
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox
-            v-model="value"
-            :pt="{
-                checkbox: {
-                    class: value ? 'bg-teal-500 border-white' : undefined
-                }
-            }"
-        />
-        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>  
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tristatecheckbox/pt/index.vue b/doc/tristatecheckbox/pt/index.vue
index 597bf4d49..c57485885 100644
--- a/doc/tristatecheckbox/pt/index.vue
+++ b/doc/tristatecheckbox/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'TriStateCheckbox PT Options',
                     component: DocApiTable,
                     data: getPTOption('TriStateCheckbox')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };
diff --git a/doc/virtualscroller/pt/PTDoc.vue b/doc/virtualscroller/pt/PTDoc.vue
deleted file mode 100644
index 7d69f49e8..000000000
--- a/doc/virtualscroller/pt/PTDoc.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="card flex justify-content-center">
-        <VirtualScroller
-            :items="items"
-            :itemSize="50"
-            :pt="{
-                root: {
-                    class: 'border-1 surface-border border-round',
-                    style: { width: '200px', height: '200px' }
-                }
-            }"
-        >
-            <template v-slot:item="{ item, options }">
-                <div :class="['flex align-items-center p-2', { 'surface-hover': 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"
-    :pt="{
-        root: {
-            class: 'border-1 surface-border border-round',
-            style: { width: '200px', height: '200px' }
-        }
-    }"
->
-`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <VirtualScroller
-            :items="items"
-            :itemSize="50"
-            :pt="{
-                root: {
-                    class: 'border-1 surface-border border-round',
-                    style: { width: '200px', height: '200px' }
-                }
-            }"
-        >
-    </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-content-center">
-        <VirtualScroller
-            :items="items"
-            :itemSize="50"
-            :pt="{
-                root: {
-                    class: 'border-1 surface-border border-round',
-                    style: { width: '200px', height: '200px' }
-                }
-            }"
-        >
-    </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/doc/virtualscroller/pt/index.vue b/doc/virtualscroller/pt/index.vue
index d8d8676e7..7b403f1f1 100644
--- a/doc/virtualscroller/pt/index.vue
+++ b/doc/virtualscroller/pt/index.vue
@@ -11,7 +11,6 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
-import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -28,11 +27,6 @@ export default {
                     label: 'VirtualScroller PT Options',
                     component: DocApiTable,
                     data: getPTOption('VirtualScroller')
-                },
-                {
-                    id: 'pt.demo',
-                    label: 'Demo',
-                    component: PtDoc
                 }
             ]
         };

From 74348786fa5f0ee1760f6e430658219d084c9206 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 11:16:34 +0300
Subject: [PATCH 09/36] Card, AvatarGroup .d.ts updates

---
 components/lib/avatargroup/AvatarGroup.d.ts | 32 +++++++++++++++++++--
 components/lib/card/Card.d.ts               | 24 +++++++++++++++-
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/components/lib/avatargroup/AvatarGroup.d.ts b/components/lib/avatargroup/AvatarGroup.d.ts
index 70b4fd8f0..978fdead4 100644
--- a/components/lib/avatargroup/AvatarGroup.d.ts
+++ b/components/lib/avatargroup/AvatarGroup.d.ts
@@ -2,7 +2,7 @@
  *
  * A set of Avatars can be displayed together using the AvatarGroup component.
  *
- * [Live Demo](https://www.primevue.org/accordion/)
+ * [Live Demo](https://www.primevue.org/avatar/)
  *
  * @module avatargroup
  *
@@ -12,7 +12,33 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
+export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | ((options: AvatarGroupPassThroughMethodOptions) => AvatarGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarGroupPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: AvatarGroupProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
 
 /**
  * Custom passthrough attributes for each DOM elements
@@ -78,7 +104,7 @@ export interface AvatarGroupEmits {}
  *
  * _A set of Avatars can be displayed together using the AvatarGroup component._
  *
- * [Live Demo](https://www.primevue.org/avatargroup/)
+ * [Live Demo](https://www.primevue.org/avatar/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
diff --git a/components/lib/card/Card.d.ts b/components/lib/card/Card.d.ts
index f757ab3b5..b64552c9d 100755
--- a/components/lib/card/Card.d.ts
+++ b/components/lib/card/Card.d.ts
@@ -12,7 +12,29 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
+export declare type CardPassThroughOptionType = CardPassThroughAttributes | ((options: CardPassThroughMethodOptions) => CardPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CardPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: CardProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
 
 /**
  * Custom passthrough(pt) options.

From f1c765d6535c6165dc87ebac2ca90a4c2def3aa1 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 20 Feb 2024 08:17:40 +0000
Subject: [PATCH 10/36] Update API doc

---
 doc/common/apidoc/index.json | 92 ++++++++++++++++++++++++++++++++++--
 1 file changed, 89 insertions(+), 3 deletions(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 284a6bbaf..84d1ce831 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -4608,7 +4608,7 @@
         }
     },
     "avatargroup": {
-        "description": "A set of Avatars can be displayed together using the AvatarGroup component.\n\n[Live Demo](https://www.primevue.org/accordion/)",
+        "description": "A set of Avatars can be displayed together using the AvatarGroup component.\n\n[Live Demo](https://www.primevue.org/avatar/)",
         "components": {
             "default": {
                 "description": "A set of Avatars can be displayed together using the AvatarGroup component.",
@@ -4624,6 +4624,53 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "AvatarGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AvatarGroupProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
                 "AvatarGroupPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
@@ -4716,7 +4763,7 @@
             "description": "Defines the custom types used by the module.",
             "values": {
                 "AvatarGroupPassThroughOptionType": {
-                    "values": "AvatarGroupPassThroughAttributes | null | undefined"
+                    "values": "AvatarGroupPassThroughAttributes | (options: AvatarGroupPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }
@@ -8925,6 +8972,45 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "CardPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CardProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CardPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "CardProps.pt",
@@ -9097,7 +9183,7 @@
             "description": "Defines the custom types used by the module.",
             "values": {
                 "CardPassThroughOptionType": {
-                    "values": "CardPassThroughAttributes | null | undefined"
+                    "values": "CardPassThroughAttributes | (options: CardPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }

From f6d86453b548c7d6389bf0d9d9c246bbc210e019 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 11:49:35 +0300
Subject: [PATCH 11/36] Fixed #5252 - MeterGroup: Cutoff at the beginning when
 the first element is 0

---
 components/lib/metergroup/MeterGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/metergroup/MeterGroup.vue b/components/lib/metergroup/MeterGroup.vue
index 3d8336340..4c1491d49 100644
--- a/components/lib/metergroup/MeterGroup.vue
+++ b/components/lib/metergroup/MeterGroup.vue
@@ -7,7 +7,7 @@
         <div :class="cx('metercontainer')" v-bind="ptm('metercontainer')">
             <template v-for="(val, index) in value" :key="index">
                 <slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
-                    <span :class="cx('meter')" :style="meterSize(val)" v-bind="getPTOptions('meter', val, index)" />
+                    <span v-if="percent(val.value)" :class="cx('meter')" :style="meterSize(val)" v-bind="getPTOptions('meter', val, index)" />
                 </slot>
             </template>
         </div>

From 0e7b65c3caef9cbdf8c872500f0bce0df0ade317 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20G=C5=82owala?= <damian.glowala.rebkow@gmail.com>
Date: Tue, 20 Feb 2024 10:18:07 +0100
Subject: [PATCH 12/36] fix(Calendar): expose same attrs to pt context for day
 and day label

---
 components/lib/calendar/Calendar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index ae06dd71b..9f459c24a 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -205,7 +205,9 @@
                                                             context: {
                                                                 date,
                                                                 today: date.today,
-                                                                otherMonth: date.otherMonth
+                                                                otherMonth: date.otherMonth,
+                                                                selected: isSelected(date),
+                                                                disabled: !date.selectable
                                                             }
                                                         })
                                                     "
@@ -225,6 +227,8 @@
                                                             ptm('dayLabel', {
                                                                 context: {
                                                                     date,
+                                                                    today: date.today,
+                                                                    otherMonth: date.otherMonth,
                                                                     selected: isSelected(date),
                                                                     disabled: !date.selectable
                                                                 }

From 5cc61a351c1749a47af46f113357d09c95a7fe27 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 17:47:55 +0300
Subject: [PATCH 13/36] Refactor #5266

---
 components/lib/stepper/Stepper.d.ts           |  16 ++-
 components/lib/stepper/Stepper.vue            | 123 +++++++++---------
 components/lib/stepper/StepperHeader.vue      |  13 +-
 components/lib/stepper/style/StepperStyle.js  |   1 -
 components/lib/stepperpanel/StepperPanel.d.ts |  12 ++
 public/themes/arya-blue/theme.css             |   2 +-
 public/themes/arya-green/theme.css            |   2 +-
 public/themes/arya-orange/theme.css           |   2 +-
 public/themes/arya-purple/theme.css           |   2 +-
 public/themes/aura-dark-amber/theme.css       |   5 +-
 public/themes/aura-dark-blue/theme.css        |   5 +-
 public/themes/aura-dark-cyan/theme.css        |   5 +-
 public/themes/aura-dark-green/theme.css       |   5 +-
 public/themes/aura-dark-indigo/theme.css      |   5 +-
 public/themes/aura-dark-lime/theme.css        |   5 +-
 public/themes/aura-dark-noir/theme.css        |   5 +-
 public/themes/aura-dark-pink/theme.css        |   5 +-
 public/themes/aura-dark-purple/theme.css      |   5 +-
 public/themes/aura-dark-teal/theme.css        |   5 +-
 public/themes/aura-light-amber/theme.css      |   5 +-
 public/themes/aura-light-blue/theme.css       |   5 +-
 public/themes/aura-light-cyan/theme.css       |   5 +-
 public/themes/aura-light-green/theme.css      |   5 +-
 public/themes/aura-light-indigo/theme.css     |   5 +-
 public/themes/aura-light-lime/theme.css       |   5 +-
 public/themes/aura-light-noir/theme.css       |   5 +-
 public/themes/aura-light-pink/theme.css       |   5 +-
 public/themes/aura-light-purple/theme.css     |   5 +-
 public/themes/aura-light-teal/theme.css       |   5 +-
 public/themes/bootstrap4-dark-blue/theme.css  |   2 +-
 .../themes/bootstrap4-dark-purple/theme.css   |   2 +-
 public/themes/bootstrap4-light-blue/theme.css |   2 +-
 .../themes/bootstrap4-light-purple/theme.css  |   2 +-
 public/themes/fluent-light/theme.css          |   2 +-
 public/themes/lara-dark-amber/theme.css       |   2 +-
 public/themes/lara-dark-blue/theme.css        |   2 +-
 public/themes/lara-dark-cyan/theme.css        |   2 +-
 public/themes/lara-dark-green/theme.css       |   2 +-
 public/themes/lara-dark-indigo/theme.css      |   2 +-
 public/themes/lara-dark-pink/theme.css        |   2 +-
 public/themes/lara-dark-purple/theme.css      |   2 +-
 public/themes/lara-dark-teal/theme.css        |   2 +-
 public/themes/lara-light-amber/theme.css      |   2 +-
 public/themes/lara-light-blue/theme.css       |   2 +-
 public/themes/lara-light-cyan/theme.css       |   2 +-
 public/themes/lara-light-green/theme.css      |   2 +-
 public/themes/lara-light-indigo/theme.css     |   2 +-
 public/themes/lara-light-pink/theme.css       |   2 +-
 public/themes/lara-light-purple/theme.css     |   2 +-
 public/themes/lara-light-teal/theme.css       |   2 +-
 public/themes/luna-amber/theme.css            |   2 +-
 public/themes/luna-blue/theme.css             |   2 +-
 public/themes/luna-green/theme.css            |   2 +-
 public/themes/luna-pink/theme.css             |   2 +-
 public/themes/md-dark-deeppurple/theme.css    |   2 +-
 public/themes/md-dark-indigo/theme.css        |   2 +-
 public/themes/md-light-deeppurple/theme.css   |   2 +-
 public/themes/md-light-indigo/theme.css       |   2 +-
 public/themes/mdc-dark-deeppurple/theme.css   |   2 +-
 public/themes/mdc-dark-indigo/theme.css       |   2 +-
 public/themes/mdc-light-deeppurple/theme.css  |   2 +-
 public/themes/mdc-light-indigo/theme.css      |   2 +-
 public/themes/mira/theme.css                  |   2 +-
 public/themes/nano/theme.css                  |   2 +-
 public/themes/nova-accent/theme.css           |   2 +-
 public/themes/nova-alt/theme.css              |   2 +-
 public/themes/nova-vue/theme.css              |   2 +-
 public/themes/nova/theme.css                  |   2 +-
 public/themes/rhea/theme.css                  |   2 +-
 public/themes/saga-blue/theme.css             |   2 +-
 public/themes/saga-green/theme.css            |   2 +-
 public/themes/saga-orange/theme.css           |   2 +-
 public/themes/saga-purple/theme.css           |   2 +-
 public/themes/soho-dark/theme.css             |   2 +-
 public/themes/soho-light/theme.css            |   2 +-
 public/themes/tailwind-light/theme.css        |   2 +-
 public/themes/vela-blue/theme.css             |   2 +-
 public/themes/vela-green/theme.css            |   2 +-
 public/themes/vela-orange/theme.css           |   2 +-
 public/themes/vela-purple/theme.css           |   2 +-
 public/themes/viva-dark/theme.css             |   2 +-
 public/themes/viva-light/theme.css            |   2 +-
 82 files changed, 233 insertions(+), 146 deletions(-)

diff --git a/components/lib/stepper/Stepper.d.ts b/components/lib/stepper/Stepper.d.ts
index a94ec129b..92294cf35 100644
--- a/components/lib/stepper/Stepper.d.ts
+++ b/components/lib/stepper/Stepper.d.ts
@@ -7,6 +7,7 @@
  * @module stepper
  *
  */
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { StepperPanelPassThroughOptionType } from '../stepperpanel';
@@ -53,10 +54,6 @@ export interface StepperPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: StepperPassThroughOptionType;
-    /**
-     * Used to pass attributes to the nav container's DOM element.
-     */
-    navContainer?: StepperPassThroughOptionType;
     /**
      * Used to pass attributes to the nav's DOM element.
      */
@@ -151,7 +148,16 @@ export interface StepperProps {
 /**
  * Defines valid slots in Stepper component.
  */
-export interface StepperSlots {}
+export interface StepperSlots {
+    /**
+     * Custom start template.
+     */
+    start(): VNode[];
+    /**
+     * Custom end template.
+     */
+    end(): VNode[];
+}
 
 /**
  * Defines valid emits in Stepper component.
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 56e81e49c..88afc97cd 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -3,52 +3,50 @@
         <slot v-if="$slots.start" name="start" />
 
         <template v-if="orientation === 'horizontal'">
-            <div :class="cx('navContainer')" v-bind="ptm('navContainer')">
-                <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
-                    <li
-                        v-for="(step, index) of stepperpanels"
-                        :key="getStepKey(step, index)"
-                        :class="cx('stepper.header', { step, index })"
-                        :aria-current="isStepActive(index) ? 'step' : undefined"
-                        role="presentation"
-                        v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
-                        data-pc-name="stepperpanel"
-                        :data-p-highlight="isStepActive(index)"
-                        :data-p-disabled="isItemDisabled(index)"
-                        :data-pc-index="index"
-                        :data-p-active="isStepActive(index)"
-                    >
-                        <slot name="header">
-                            <StepperHeader
-                                :id="getStepHeaderActionId(index)"
-                                :template="step.children?.header"
-                                :stepperpanel="step"
-                                :index="index"
-                                :disabled="isItemDisabled(index)"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :class="cx('stepper.action')"
-                                :aria-controls="getStepContentId(index)"
-                                :clickCallback="(event) => onItemClick(event, index)"
-                                :getStepPT="getStepPT"
-                                :getStepProp="getStepProp"
-                            />
-                        </slot>
-                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                            <StepperSeparator
-                                v-if="index !== stepperpanels.length - 1"
-                                :template="step.children?.separator"
-                                :separatorClass="cx('stepper.separator')"
-                                :stepperpanel="step"
-                                :index="index"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :getStepPT="getStepPT(step, 'separator', index)"
-                            />
-                        </slot>
-                    </li>
-                </ul>
-            </div>
+            <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
+                <li
+                    v-for="(step, index) of stepperpanels"
+                    :key="getStepKey(step, index)"
+                    :class="cx('stepper.header', { step, index })"
+                    :aria-current="isStepActive(index) ? 'step' : undefined"
+                    role="presentation"
+                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
+                    data-pc-name="stepperpanel"
+                    :data-p-highlight="isStepActive(index)"
+                    :data-p-disabled="isItemDisabled(index)"
+                    :data-pc-index="index"
+                    :data-p-active="isStepActive(index)"
+                >
+                    <slot name="header">
+                        <StepperHeader
+                            :id="getStepHeaderActionId(index)"
+                            :template="step.children?.header"
+                            :stepperpanel="step"
+                            :index="index"
+                            :disabled="isItemDisabled(index)"
+                            :active="isStepActive(index)"
+                            :highlighted="index < d_activeStep"
+                            :class="cx('stepper.action')"
+                            :aria-controls="getStepContentId(index)"
+                            :clickCallback="(event) => onItemClick(event, index)"
+                            :getStepPT="getStepPT"
+                            :getStepProp="getStepProp"
+                        />
+                    </slot>
+                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
+                        <StepperSeparator
+                            v-if="index !== stepperpanels.length - 1"
+                            :template="step.children?.separator"
+                            :separatorClass="cx('stepper.separator')"
+                            :stepperpanel="step"
+                            :index="index"
+                            :active="isStepActive(index)"
+                            :highlighted="index < d_activeStep"
+                            :getStepPT="getStepPT(step, 'separator', index)"
+                        />
+                    </slot>
+                </li>
+            </ul>
             <div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
                 <template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
                     <StepperContent
@@ -100,20 +98,21 @@
                         />
                     </slot>
                 </div>
-                <div :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
-                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                        <StepperSeparator
-                            v-if="index !== stepperpanels.length - 1"
-                            :template="step.children?.separator"
-                            :separatorClass="cx('stepper.separator')"
-                            :stepperpanel="step"
-                            :index="index"
-                            :active="isStepActive(index)"
-                            :highlighted="index < d_activeStep"
-                            :getStepPT="getStepPT(step, 'separator', index)"
-                        />
-                    </slot>
-                    <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
+
+                <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
+                    <div v-if="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
+                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
+                            <StepperSeparator
+                                v-if="index !== stepperpanels.length - 1"
+                                :template="step.children?.separator"
+                                :separatorClass="cx('stepper.separator')"
+                                :stepperpanel="step"
+                                :index="index"
+                                :active="isStepActive(index)"
+                                :highlighted="index < d_activeStep"
+                                :getStepPT="getStepPT(step, 'separator', index)"
+                            />
+                        </slot>
                         <slot name="content">
                             <StepperContent
                                 v-show="isStepActive(index)"
@@ -130,8 +129,8 @@
                                 :aria-labelledby="getStepHeaderActionId(index)"
                             />
                         </slot>
-                    </transition>
-                </div>
+                    </div>
+                </transition>
             </div>
         </template>
         <slot v-if="$slots.end" name="end" />
diff --git a/components/lib/stepper/StepperHeader.vue b/components/lib/stepper/StepperHeader.vue
index 0986ed081..76d6b9b8c 100644
--- a/components/lib/stepper/StepperHeader.vue
+++ b/components/lib/stepper/StepperHeader.vue
@@ -1,5 +1,16 @@
 <template>
-    <component v-if="template" :is="template" :index="index" :active="active" :highlighted="highlighted" :class="cx('stepper.action')" :clickCallback="(event) => clickCallback(event, index)" />
+    <component
+        v-if="template"
+        :is="template"
+        :index="index"
+        :active="active"
+        :highlighted="highlighted"
+        :class="cx('stepper.action')"
+        :headerClass="cx('stepper.action')"
+        :numberClass="cx('stepper.number')"
+        :titleClass="cx('stepper.title')"
+        :clickCallback="(event) => clickCallback(event, index)"
+    />
     <button v-else :id="id" :class="cx('stepper.action')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'action', index)">
         <span :class="cx('stepper.number')" v-bind="getStepPT(stepperpanel, 'number', index)">{{ index + 1 }}</span>
         <span :class="cx('stepper.title')" v-bind="getStepPT(stepperpanel, 'title', index)">{{ getStepProp(stepperpanel, 'header') }}</span>
diff --git a/components/lib/stepper/style/StepperStyle.js b/components/lib/stepper/style/StepperStyle.js
index 11e7ce872..f1578ac23 100644
--- a/components/lib/stepper/style/StepperStyle.js
+++ b/components/lib/stepper/style/StepperStyle.js
@@ -9,7 +9,6 @@ const classes = {
             'p-readonly': props.linear
         }
     ],
-    navContainer: 'p-stepper-nav-container',
     nav: 'p-stepper-nav',
     stepper: {
         header: ({ instance, step, index }) => [
diff --git a/components/lib/stepperpanel/StepperPanel.d.ts b/components/lib/stepperpanel/StepperPanel.d.ts
index 8d477c10a..8f95e080b 100644
--- a/components/lib/stepperpanel/StepperPanel.d.ts
+++ b/components/lib/stepperpanel/StepperPanel.d.ts
@@ -184,6 +184,18 @@ export interface StepperPanelSlots {
          * Style class of the stepperpanel
          */
         class: string;
+        /**
+         * Style class of the stepperpanel
+         */
+        headerClass: string;
+        /**
+         * Style class of the number content container
+         */
+        numberClass: string;
+        /**
+         * Style class of the title content container
+         */
+        titleClass: string;
         /**
          * Header click function.
          * @param {Event} event - Browser event
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index f8bf48945..a5223b08d 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 7d9cd5ac9..7278119d3 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index c193539e3..a853cb151 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 4454e3118..c2965363d 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index 8cf644ac1..9de6b57cb 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #fbbf24;
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index 4efb18f52..08822ee98 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #60a5fa;
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index 86532beda..22b7fa082 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #22d3ee;
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index 52e6faad1..f0399e3cb 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #34d399;
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index d6da905ae..6ec354216 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #818cf8;
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index fd5acc100..3e834d596 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #a3e635;
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index 9a59198b3..a4f41924f 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #fafafa;
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index c6cd72169..c95143f6f 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #f472b6;
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 452b3e382..27935ca85 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #a78bfa;
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index 42f26b0a9..117fd4225 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -6403,12 +6403,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11797,6 +11797,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #18181b;
     color: #2dd4bf;
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index e78a79226..ec09b0414 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #f59e0b;
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index f4a5c07b3..1cd094f43 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #3B82F6;
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index ee4e978ef..ac0d3fb7e 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #06b6d4;
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index aa07961a1..9c894b6c0 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #10b981;
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index 149e8ddb0..bd07b09b8 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #6366F1;
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index 677d4a054..6784b63d4 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #84cc16;
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index 4e5d047d5..08513f60c 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -6413,12 +6413,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11803,6 +11803,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #020617;
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index 5575832bd..eca62a30b 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #ec4899;
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index 7d2abf327..e25b41207 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #8B5CF6;
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index 961e1ab3c..f124a432f 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -6405,12 +6405,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
@@ -11795,6 +11795,9 @@
     border-radius: 6px;
   }
 
+  .p-stepper .p-stepper-header .p-stepper-number {
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+  }
   .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
     background: #ffffff;
     color: #14b8a6;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 77f13cca3..301eb4d43 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -6396,12 +6396,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 55542173f..37002f762 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -6396,12 +6396,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 4d39d258d..1aec877dd 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -6396,12 +6396,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 8dbff984a..bae0b1032 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -6396,12 +6396,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 7098a7485..91bdd9f4d 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -6307,12 +6307,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index d0e242cc1..e03e306df 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 464dda183..f11813d2e 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 0f6ab07a9..4017009a4 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 6bf9473d4..71c7d7fcf 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index e37fe994e..81c2cdb31 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index bfd998a71..225855982 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 1e289879b..17931a10b 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 5ba62b277..06e92b5a8 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index cf760f0ec..a1846e97b 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 02545b094..c52a4f27f 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index e95df6d25..dc8effe19 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index b91df0851..ea86fe355 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index a82a3c4f3..e5f43f652 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 66bd0d898..368f92929 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 818f410f1..6c286fc42 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index eed37f36c..aa41c8a34 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -6378,12 +6378,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index ba7b91553..de3ecc522 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 05cdd482f..0735e5f13 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 2761da1c7..9ee1cbd98 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 1ddfc548f..777e905fa 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 5124493ef..9f27cbb8d 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -6409,12 +6409,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 5560d8f53..1bcb85c96 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -6409,12 +6409,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 6c70accdb..861bc1e01 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -6408,12 +6408,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index ca526d014..3fb1973f9 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -6408,12 +6408,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index abe6ee4de..758377026 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -6409,12 +6409,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index ad3604c8e..417f0dc30 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -6409,12 +6409,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index e3552a3f7..93edb3402 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -6408,12 +6408,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 905c96bdf..40f401831 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -6408,12 +6408,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 4d9059fb1..c2fc9a9c1 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -6363,12 +6363,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 17e502672..5a83e774a 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 4348fcd44..fb46f2b65 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -6310,12 +6310,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 3a9a53245..52df4b159 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 2f04026a1..2702258af 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index c610d36b9..ac967ff21 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -6322,12 +6322,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index b273330df..3b5dcffdf 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -6310,12 +6310,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 1b4fd7e75..3d845a2cf 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index b26a83834..fa8323357 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 942b932f5..81befe107 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index ad0a89395..e1455fda4 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 20652694a..bd6f3f749 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -6383,12 +6383,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index a3b8cc530..9a99d7ae1 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -6383,12 +6383,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 91dfad062..e519c1538 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -6370,12 +6370,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 3d4675d5e..db3f3eef2 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 54b2d6ff8..fcb70c3c3 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index b969b8792..dc53ece7f 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 66e645473..b9a12e9a2 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -6335,12 +6335,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 54f7ef562..3828c6b76 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -6416,12 +6416,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 4baf569ea..7aaa9dd71 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -6416,12 +6416,12 @@
     flex: initial;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
     padding-left: 1rem;
   }
   .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
     flex: 0 0 auto;
     width: 2px;
-    min-height: 28px;
     height: auto;
     margin-inline-start: calc(1.75rem + 2px);
   }

From 4ecae4d83bf8f5d06be456e3a6719b5c4f3f622a Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 20 Feb 2024 14:49:00 +0000
Subject: [PATCH 14/36] Update API doc

---
 doc/common/apidoc/index.json | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 84d1ce831..44c59e757 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -49876,14 +49876,6 @@
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
-                        {
-                            "name": "navContainer",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "StepperPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the nav container's DOM element."
-                        },
                         {
                             "name": "nav",
                             "optional": true,
@@ -50037,7 +50029,20 @@
                     "description": "Defines valid slots in Stepper component.",
                     "relatedProp": "",
                     "props": [],
-                    "methods": []
+                    "methods": [
+                        {
+                            "name": "start",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom start template."
+                        },
+                        {
+                            "name": "end",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom end template."
+                        }
+                    ]
                 },
                 "StepperEmits": {
                     "description": "Defines valid emits in Stepper component.",
@@ -50431,7 +50436,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Header click function.</span>\n}"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">headerClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">numberClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the number content container</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">titleClass</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the title content container</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Header click function.</span>\n}"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",

From ee7515056b98b7d50ee3f32989976b22dae678da Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 17:56:41 +0300
Subject: [PATCH 15/36] Refactor #5266

---
 components/lib/stepper/Stepper.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 88afc97cd..e4a967517 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -100,7 +100,7 @@
                 </div>
 
                 <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
-                    <div v-if="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
+                    <div v-show="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
                         <slot v-if="index !== stepperpanels.length - 1" name="separator">
                             <StepperSeparator
                                 v-if="index !== stepperpanels.length - 1"
@@ -115,7 +115,6 @@
                         </slot>
                         <slot name="content">
                             <StepperContent
-                                v-show="isStepActive(index)"
                                 :id="getStepContentId(index)"
                                 :template="step?.children?.content"
                                 :stepperpanel="step"

From 9a416252a7ed64c5b848a6e06e03d965a9fc4862 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 20 Feb 2024 17:56:58 +0300
Subject: [PATCH 16/36] Stepper demo updated

---
 doc/stepper/BasicDoc.vue          | 212 +++++----
 doc/stepper/ExampleDoc.vue        | 483 +++++++++++++++++++
 doc/stepper/TemplateDoc.vue       | 740 ------------------------------
 doc/stepper/VerticalDoc.vue       | 212 +++++----
 doc/stepper/theming/StyledDoc.vue |   4 -
 pages/stepper/index.vue           |   8 +-
 6 files changed, 695 insertions(+), 964 deletions(-)
 create mode 100644 doc/stepper/ExampleDoc.vue
 delete mode 100644 doc/stepper/TemplateDoc.vue

diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index df1fa7d70..ae54150a5 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -4,37 +4,36 @@
     </DocSectionText>
     <div class="card">
         <Stepper>
-            <StepperPanel header="Header 1">
-                <template #content="{ nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
-                    </div>
-                </template>
-            </StepperPanel>
-            <StepperPanel header="Header 2">
+            <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
-            <StepperPanel header="Header 3">
-                <template #content="{ prevCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,37 +49,36 @@ export default {
             code: {
                 basic: `
 <Stepper>
-    <StepperPanel header="Header 1">
-        <template #content="{ nextCallback }">
-            <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>
-            <div class="flex gap-2 justify-content-end">
-                <Button label="Next" @click="(event) => nextCallback(event)" />
-            </div>
-        </template>
-    </StepperPanel>
-    <StepperPanel header="Header 2">
+    <StepperPanel header="Header I">
         <template #content="{ prevCallback, nextCallback }">
-            <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>
-            <div class="flex gap-2 justify-content-end">
-                <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                <Button label="Next" @click="(event) => nextCallback(event)" />
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
-    <StepperPanel header="Header 3">
-        <template #content="{ prevCallback }">
-            <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>
-            <div class="flex gap-2 justify-content-end">
-                <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+    <StepperPanel header="Header II">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -90,37 +88,36 @@ export default {
 <template>
     <div class="card">
         <Stepper>
-            <StepperPanel header="Header 1">
-                <template #content="{ nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
-                    </div>
-                </template>
-            </StepperPanel>
-            <StepperPanel header="Header 2">
+            <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
-            <StepperPanel header="Header 3">
-                <template #content="{ prevCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -132,37 +129,36 @@ export default {
 <template>
     <div class="card">
         <Stepper>
-            <StepperPanel header="Header 1">
-                <template #content="{ nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
-                    </div>
-                </template>
-            </StepperPanel>
-            <StepperPanel header="Header 2">
+            <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
-            <StepperPanel header="Header 3">
-                <template #content="{ prevCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
diff --git a/doc/stepper/ExampleDoc.vue b/doc/stepper/ExampleDoc.vue
new file mode 100644
index 000000000..b602111d6
--- /dev/null
+++ b/doc/stepper/ExampleDoc.vue
@@ -0,0 +1,483 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
+    </DocSectionText>
+    <div class="card flex flex-column justify-content-center">
+        <Stepper v-model:activeStep="active">
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Account</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
+                        <h3 class="text-center mt-3">Create your account</h3>
+                        <div class="field p-fluid">
+                            <IconField>
+                                <InputIcon>
+                                    <i class="pi pi-user" />
+                                </InputIcon>
+                                <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                            </IconField>
+                        </div>
+                        <div class="field p-fluid">
+                            <IconField>
+                                <InputIcon>
+                                    <i class="pi pi-envelope" />
+                                </InputIcon>
+                                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                            </IconField>
+                        </div>
+                        <div class="field p-fluid">
+                            <Password v-model="password" toggleMask placeholder="Password" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Interests</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                        <h3 class="text-center mt-3">Create your interests</h3>
+                        <div class="flex flex-wrap justify-content-center gap-3">
+                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
+                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
+                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
+                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
+                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
+                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Complete</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
+                        <div class="flex justify-content-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            name: null,
+            email: null,
+            password: null,
+            option1: false,
+            option2: true,
+            option3: false,
+            option4: true,
+            option5: false,
+            option6: true,
+            option7: true,
+            option8: true,
+            code: {
+                basic: `
+<Stepper v-model:activeStep="active">
+    <StepperPanel>
+        <template #header="{ index, clickCallback, headerClass, numberClass }">
+            <div :class="headerClass" @click="clickCallback">
+                <span :class="[numberClass, 'text-color']">
+                    <i v-if="index < active" class="pi pi-check font-semibold" />
+                    <template v-else>
+                        {{ index + 1 }}
+                    </template>
+                </span>
+                <span class="text-base ml-2">Account</span>
+            </div>
+        </template>
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
+                <h3 class="text-center mt-3">Create your account</h3>
+                <div class="field p-fluid">
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-user" />
+                        </InputIcon>
+                        <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                    </IconField>
+                </div>
+                <div class="field p-fluid">
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-envelope" />
+                        </InputIcon>
+                        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                    </IconField>
+                </div>
+                <div class="field p-fluid">
+                    <Password v-model="password" toggleMask placeholder="Password" />
+                </div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel>
+        <template #header="{ index, clickCallback, headerClass, numberClass }">
+            <div :class="headerClass" @click="clickCallback">
+                <span :class="[numberClass, 'text-color']">
+                    <i v-if="index < active" class="pi pi-check font-semibold" />
+                    <template v-else>
+                        {{ index + 1 }}
+                    </template>
+                </span>
+                <span class="text-base ml-2">Interests</span>
+            </div>
+        </template>
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                <h3 class="text-center mt-3">Create your interests</h3>
+                <div class="flex flex-wrap justify-content-center gap-3">
+                    <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
+                    <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
+                    <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
+                    <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
+                    <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
+                    <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
+                    <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
+                    <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                </div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel>
+        <template #header="{ index, clickCallback, headerClass, numberClass }">
+            <div :class="headerClass" @click="clickCallback">
+                <span :class="[numberClass, 'text-color']">
+                    <i v-if="index < active" class="pi pi-check font-semibold" />
+                    <template v-else>
+                        {{ index + 1 }}
+                    </template>
+                </span>
+                <span class="text-base ml-2">Complete</span>
+            </div>
+        </template>
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card flex flex-column justify-content-center">
+        <Stepper v-model:activeStep="active">
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Account</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
+                        <h3 class="text-center mt-3">Create your account</h3>
+                        <div class="field p-fluid">
+                            <IconField>
+                                <InputIcon>
+                                    <i class="pi pi-user" />
+                                </InputIcon>
+                                <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                            </IconField>
+                        </div>
+                        <div class="field p-fluid">
+                            <IconField>
+                                <InputIcon>
+                                    <i class="pi pi-envelope" />
+                                </InputIcon>
+                                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                            </IconField>
+                        </div>
+                        <div class="field p-fluid">
+                            <Password v-model="password" toggleMask placeholder="Password" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Interests</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                        <h3 class="text-center mt-3">Create your interests</h3>
+                        <div class="flex flex-wrap justify-content-center gap-3">
+                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
+                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
+                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
+                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
+                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
+                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Complete</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
+                        <div class="flex justify-content-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            name: null,
+            email: null,
+            password: null,
+            option1: false,
+            option2: true,
+            option3: false,
+            option4: true,
+            option5: false,
+            option6: true,
+            option7: true,
+            option8: true,
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-column justify-content-center">
+        <Stepper v-model:activeStep="active">
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Account</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
+                        <h3 class="text-center mt-3">Create your account</h3>
+                        <div class="field p-fluid">
+                            <IconField>
+                                <InputIcon>
+                                    <i class="pi pi-user" />
+                                </InputIcon>
+                                <InputText id="input" v-model="name" type="text" placeholder="Name" />
+                            </IconField>
+                        </div>
+                        <div class="field p-fluid">
+                            <IconField>
+                                <InputIcon>
+                                    <i class="pi pi-envelope" />
+                                </InputIcon>
+                                <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                            </IconField>
+                        </div>
+                        <div class="field p-fluid">
+                            <Password v-model="password" toggleMask placeholder="Password" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Interests</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                        <h3 class="text-center mt-3">Create your interests</h3>
+                        <div class="flex flex-wrap justify-content-center gap-3">
+                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
+                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
+                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
+                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
+                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
+                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel>
+                <template #header="{ index, clickCallback, headerClass, numberClass }">
+                    <div :class="headerClass" @click="clickCallback">
+                        <span :class="[numberClass, 'text-color']">
+                            <i v-if="index < active" class="pi pi-check font-semibold" />
+                            <template v-else>
+                                {{ index + 1 }}
+                            </template>
+                        </span>
+                        <span class="text-base ml-2">Complete</span>
+                    </div>
+                </template>
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
+                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
+                        <div class="flex justify-content-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                        </div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const active = ref(0);
+const completed = ref(false);
+const products = ref();
+const name = ref();
+const email = ref();
+const password = ref();
+const option1 = ref(false);
+const option2 = ref(true);
+const option3 = ref(false);
+const option4 = ref(true);
+const option5 = ref(false);
+const option6 = ref(true);
+const option7 = ref(true);
+const option8 = ref(true);
+
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
deleted file mode 100644
index 2fda2b679..000000000
--- a/doc/stepper/TemplateDoc.vue
+++ /dev/null
@@ -1,740 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
-    </DocSectionText>
-    <div class="card flex flex-column justify-content-center">
-        <Stepper
-            v-model:activeStep="active"
-            :pt="{
-                stepperpanel: {
-                    separator: ({ context }) => ({
-                        style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
-                    })
-                }
-            }"
-        >
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
-                        <span class="text-lg ml-2">Account</span>
-                    </div>
-                </template>
-                <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                    <h3 class="text-center mt-3">Personal Details</h3>
-                    <div class="field p-fluid">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-user" />
-                            </InputIcon>
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
-                        </IconField>
-                    </div>
-                    <div class="field p-fluid">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-envelope" />
-                            </InputIcon>
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                        </IconField>
-                    </div>
-                    <div class="field p-fluid">
-                        <InputText v-model="password" type="text" placeholder="Password" />
-                    </div>
-                    <div class="field p-fluid">
-                        <InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
-                    </div>
-                </div>
-            </StepperPanel>
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar
-                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
-                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                            size="large"
-                            shape="circle"
-                        />
-                        <span class="text-lg ml-2">Cart</span>
-                    </div>
-                </template>
-                <DataView :value="products">
-                    <template #header>
-                        <h3 class="text-center">Cart Details</h3>
-                    </template>
-                    <template #list="slotProps">
-                        <div class="grid grid-nogutter">
-                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                                    <div class="md:w-10rem relative">
-                                        <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                    </div>
-                                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
-                                            <div>
-                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
-                                            </div>
-                                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                                <div class="surface-0 flex align-items-center gap-2 justify-content-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-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-column md:align-items-end gap-5">
-                                            <span class="text-xl font-semibold text-900">${{ item.price }}</span>
-                                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                                <InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
-                                                    <template #incrementbuttonicon>
-                                                        <span class="pi pi-plus" />
-                                                    </template>
-                                                    <template #decrementbuttonicon>
-                                                        <span class="pi pi-minus" />
-                                                    </template>
-                                                </InputNumber>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </DataView>
-            </StepperPanel>
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar
-                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
-                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                            size="large"
-                            shape="circle"
-                        />
-                        <span class="text-lg ml-2">Billing</span>
-                    </div>
-                </template>
-                <h3 class="text-center mt-3">Payment</h3>
-                <div class="grid formgrid p-fluid">
-                    <div class="col-12 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">Card Number</label>
-                        <InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
-                    </div>
-                    <div class="col-12 lg:col-6 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
-                        <InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
-                    </div>
-                    <div class="col-12 lg:col-6 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">CVC</label>
-                        <InputMask v-model="cvc" mask="999" placeholder="999" />
-                    </div>
-                    <div class="col-12 field mb-0">
-                        <label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
-                        <InputText id="holderName" type="text" class="w-full mb-3" />
-                    </div>
-                </div>
-            </StepperPanel>
-            <template #end>
-                <div v-if="!completed" class="flex justify-content-end gap-2">
-                    <Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
-                    <Button v-if="active !== 2" label="Continue" @click="active += 1" />
-                    <Button
-                        v-if="active === 2"
-                        label="Complete"
-                        @click="
-                            () => {
-                                active = null;
-                                completed = true;
-                            }
-                        "
-                    />
-                </div>
-                <div v-else class="flex flex-column justify-content-center mx-auto">
-                    <Message severity="success">The order was submitted successfully.</Message>
-                    <Button
-                        label="New Order"
-                        class="w-10rem mx-auto"
-                        @click="
-                            () => {
-                                active = 0;
-                                completed = false;
-                            }
-                        "
-                    />
-                </div>
-            </template>
-        </Stepper>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            active: 0,
-            completed: false,
-            products: null,
-            name: null,
-            email: null,
-            password: null,
-            cpassword: null,
-            quantity: [1, 2],
-            cc: null,
-            cvc: null,
-            exp: null,
-            code: {
-                basic: `
-<Stepper
-    v-model:activeStep="active"
-    :pt="{
-        stepperpanel: {
-            separator: ({ context }) => ({
-                style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
-            })
-        }
-    }"
-    >
-    <StepperPanel>
-        <template #header="slotProps">
-            <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                <Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
-                <span class="text-lg ml-2">Account</span>
-            </div>
-        </template>
-        <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-            <h3 class="text-center mt-3">Personal Details</h3>
-            <div class="field p-fluid">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-user" />
-                    </InputIcon>
-                    <InputText id="input" v-model="name" type="text" placeholder="Name" />
-                </IconField>
-            </div>
-            <div class="field p-fluid">
-                <IconField>
-                    <InputIcon>
-                        <i class="pi pi-envelope" />
-                    </InputIcon>
-                    <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                </IconField>
-            </div>
-            <div class="field p-fluid">
-                <InputText v-model="password" type="text" placeholder="Password" />
-            </div>
-            <div class="field p-fluid">
-                <InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
-            </div>
-        </div>
-    </StepperPanel>
-    <StepperPanel>
-        <template #header="slotProps">
-            <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                <Avatar
-                    :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
-                    :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                    size="large"
-                    shape="circle"
-                />
-                <span class="text-lg ml-2">Cart</span>
-            </div>
-        </template>
-        <DataView :value="products">
-            <template #header>
-                <h3 class="text-center">Cart Details</h3>
-            </template>
-            <template #list="slotProps">
-                <div class="grid grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                        <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <div class="md:w-10rem relative">
-                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                            </div>
-                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
-                                    <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                        <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
-                                    </div>
-                                    <div class="surface-100 p-1" style="border-radius: 30px">
-                                        <div class="surface-0 flex align-items-center gap-2 justify-content-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-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-column md:align-items-end gap-5">
-                                    <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
-                                    <div class="flex flex-row-reverse md:flex-row gap-2">
-                                        <InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
-                                            <template #incrementbuttonicon>
-                                                <span class="pi pi-plus" />
-                                            </template>
-                                            <template #decrementbuttonicon>
-                                                <span class="pi pi-minus" />
-                                            </template>
-                                        </InputNumber>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </DataView>
-    </StepperPanel>
-    <StepperPanel>
-        <template #header="slotProps">
-            <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                <Avatar
-                    :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
-                    :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                    size="large"
-                    shape="circle"
-                />
-                <span class="text-lg ml-2">Billing</span>
-            </div>
-        </template>
-        <h3 class="text-center mt-3">Payment</h3>
-        <div class="grid formgrid p-fluid">
-            <div class="col-12 field mb-4">
-                <label class="text-900 font-medium mb-3 ml-1">Card Number</label>
-                <InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
-            </div>
-            <div class="col-12 lg:col-6 field mb-4">
-                <label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
-                <InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
-            </div>
-            <div class="col-12 lg:col-6 field mb-4">
-                <label class="text-900 font-medium mb-3 ml-1">CVC</label>
-                <InputMask v-model="cvc" mask="999" placeholder="999" />
-            </div>
-            <div class="col-12 field mb-0">
-                <label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
-                <InputText id="holderName" type="text" class="w-full mb-3" />
-            </div>
-        </div>
-    </StepperPanel>
-    <template #end>
-        <div v-if="!completed" class="flex justify-content-end gap-2">
-            <Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
-            <Button v-if="active !== 2" label="Continue" @click="active += 1" />
-            <Button
-                v-if="active === 2"
-                label="Complete"
-                @click="
-                    () => {
-                        active = null;
-                        completed = true;
-                    }
-                "
-            />
-        </div>
-        <div v-else class="flex flex-column justify-content-center mx-auto">
-            <Message severity="success">The order was submitted successfully.</Message>
-            <Button
-                label="New Order"
-                class="w-10rem mx-auto"
-                @click="
-                    () => {
-                        active = 0;
-                        completed = false;
-                    }
-                "
-            />
-        </div>
-    </template>
-</Stepper>
-`,
-                options: `
-<template>
-    <div class="card flex flex-column justify-content-center">
-        <Stepper
-            v-model:activeStep="active"
-            :pt="{
-                stepperpanel: {
-                    separator: ({ context }) => ({
-                        style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
-                    })
-                }
-            }"
-            >
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
-                        <span class="text-lg ml-2">Account</span>
-                    </div>
-                </template>
-                <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                    <h3 class="text-center mt-3">Personal Details</h3>
-                    <div class="field p-fluid">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-user" />
-                            </InputIcon>
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
-                        </IconField>
-                    </div>
-                    <div class="field p-fluid">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-envelope" />
-                            </InputIcon>
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                        </IconField>
-                    </div>
-                    <div class="field p-fluid">
-                        <InputText v-model="password" type="text" placeholder="Password" />
-                    </div>
-                    <div class="field p-fluid">
-                        <InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
-                    </div>
-                </div>
-            </StepperPanel>
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar
-                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
-                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                            size="large"
-                            shape="circle"
-                        />
-                        <span class="text-lg ml-2">Cart</span>
-                    </div>
-                </template>
-                <DataView :value="products">
-                    <template #header>
-                        <h3 class="text-center">Cart Details</h3>
-                    </template>
-                    <template #list="slotProps">
-                        <div class="grid grid-nogutter">
-                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                                    <div class="md:w-10rem relative">
-                                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                    </div>
-                                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
-                                            <div>
-                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
-                                            </div>
-                                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                                <div class="surface-0 flex align-items-center gap-2 justify-content-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-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-column md:align-items-end gap-5">
-                                            <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
-                                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                                <InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
-                                                    <template #incrementbuttonicon>
-                                                        <span class="pi pi-plus" />
-                                                    </template>
-                                                    <template #decrementbuttonicon>
-                                                        <span class="pi pi-minus" />
-                                                    </template>
-                                                </InputNumber>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </DataView>
-            </StepperPanel>
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar
-                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
-                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                            size="large"
-                            shape="circle"
-                        />
-                        <span class="text-lg ml-2">Billing</span>
-                    </div>
-                </template>
-                <h3 class="text-center mt-3">Payment</h3>
-                <div class="grid formgrid p-fluid">
-                    <div class="col-12 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">Card Number</label>
-                        <InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
-                    </div>
-                    <div class="col-12 lg:col-6 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
-                        <InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
-                    </div>
-                    <div class="col-12 lg:col-6 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">CVC</label>
-                        <InputMask v-model="cvc" mask="999" placeholder="999" />
-                    </div>
-                    <div class="col-12 field mb-0">
-                        <label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
-                        <InputText id="holderName" type="text" class="w-full mb-3" />
-                    </div>
-                </div>
-            </StepperPanel>
-            <template #end>
-                <div v-if="!completed" class="flex justify-content-end gap-2">
-                    <Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
-                    <Button v-if="active !== 2" label="Continue" @click="active += 1" />
-                    <Button
-                        v-if="active === 2"
-                        label="Complete"
-                        @click="
-                            () => {
-                                active = null;
-                                completed = true;
-                            }
-                        "
-                    />
-                </div>
-                <div v-else class="flex flex-column justify-content-center mx-auto">
-                    <Message severity="success">The order was submitted successfully.</Message>
-                    <Button
-                        label="New Order"
-                        class="w-10rem mx-auto"
-                        @click="
-                            () => {
-                                active = 0;
-                                completed = false;
-                            }
-                        "
-                    />
-                </div>
-            </template>
-        </Stepper>
-    </div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            active: 0,
-            completed: false,
-            products: null,
-            name: null,
-            email: null,
-            password: null,
-            cpassword: null,
-            quantity: [1, 2],
-            cc: null,
-            cvc: null,
-            exp: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-column justify-content-center">
-        <Stepper
-            v-model:activeStep="active"
-            :pt="{
-                stepperpanel: {
-                    separator: ({ context }) => ({
-                        style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
-                    })
-                }
-            }"
-            >
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
-                        <span class="text-lg ml-2">Account</span>
-                    </div>
-                </template>
-                <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                    <h3 class="text-center mt-3">Personal Details</h3>
-                    <div class="field p-fluid">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-user" />
-                            </InputIcon>
-                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
-                        </IconField>
-                    </div>
-                    <div class="field p-fluid">
-                        <IconField>
-                            <InputIcon>
-                                <i class="pi pi-envelope" />
-                            </InputIcon>
-                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
-                        </IconField>
-                    </div>
-                    <div class="field p-fluid">
-                        <InputText v-model="password" type="text" placeholder="Password" />
-                    </div>
-                    <div class="field p-fluid">
-                        <InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
-                    </div>
-                </div>
-            </StepperPanel>
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar
-                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
-                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                            size="large"
-                            shape="circle"
-                        />
-                        <span class="text-lg ml-2">Cart</span>
-                    </div>
-                </template>
-                <DataView :value="products">
-                    <template #header>
-                        <h3 class="text-center">Cart Details</h3>
-                    </template>
-                    <template #list="slotProps">
-                        <div class="grid grid-nogutter">
-                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
-                                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                                    <div class="md:w-10rem relative">
-                                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                    </div>
-                                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
-                                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
-                                            <div>
-                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
-                                            </div>
-                                            <div class="surface-100 p-1" style="border-radius: 30px">
-                                                <div class="surface-0 flex align-items-center gap-2 justify-content-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-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-column md:align-items-end gap-5">
-                                            <span class="text-xl font-semibold text-900">\${{ item.price }}</span>
-                                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                                <InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
-                                                    <template #incrementbuttonicon>
-                                                        <span class="pi pi-plus" />
-                                                    </template>
-                                                    <template #decrementbuttonicon>
-                                                        <span class="pi pi-minus" />
-                                                    </template>
-                                                </InputNumber>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </DataView>
-            </StepperPanel>
-            <StepperPanel>
-                <template #header="slotProps">
-                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
-                        <Avatar
-                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
-                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
-                            size="large"
-                            shape="circle"
-                        />
-                        <span class="text-lg ml-2">Billing</span>
-                    </div>
-                </template>
-                <h3 class="text-center mt-3">Payment</h3>
-                <div class="grid formgrid p-fluid">
-                    <div class="col-12 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">Card Number</label>
-                        <InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
-                    </div>
-                    <div class="col-12 lg:col-6 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
-                        <InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
-                    </div>
-                    <div class="col-12 lg:col-6 field mb-4">
-                        <label class="text-900 font-medium mb-3 ml-1">CVC</label>
-                        <InputMask v-model="cvc" mask="999" placeholder="999" />
-                    </div>
-                    <div class="col-12 field mb-0">
-                        <label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
-                        <InputText id="holderName" type="text" class="w-full mb-3" />
-                    </div>
-                </div>
-            </StepperPanel>
-            <template #end>
-                <div v-if="!completed" class="flex justify-content-end gap-2">
-                    <Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
-                    <Button v-if="active !== 2" label="Continue" @click="active += 1" />
-                    <Button
-                        v-if="active === 2"
-                        label="Complete"
-                        @click="
-                            () => {
-                                active = null;
-                                completed = true;
-                            }
-                        "
-                    />
-                </div>
-                <div v-else class="flex flex-column justify-content-center mx-auto">
-                    <Message severity="success">The order was submitted successfully.</Message>
-                    <Button
-                        label="New Order"
-                        class="w-10rem mx-auto"
-                        @click="
-                            () => {
-                                active = 0;
-                                completed = false;
-                            }
-                        "
-                    />
-                </div>
-            </template>
-        </Stepper>
-    </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 active = ref(0);
-const completed = ref(false);
-const products = ref();
-const name = ref();
-const email = ref();
-const password = ref();
-const cpassword = ref();
-const quantity = ref([1, 2]);
-const cc = ref();
-const cvc = ref();
-const exp = ref();
-
-<\/script>
-`
-            }
-        };
-    },
-    mounted() {
-        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
-    }
-};
-</script>
diff --git a/doc/stepper/VerticalDoc.vue b/doc/stepper/VerticalDoc.vue
index 420ecb58c..a066d5ed9 100644
--- a/doc/stepper/VerticalDoc.vue
+++ b/doc/stepper/VerticalDoc.vue
@@ -4,37 +4,36 @@
     </DocSectionText>
     <div class="card">
         <Stepper orientation="vertical">
-            <StepperPanel header="Header 1">
-                <template #content="{ nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
-                    </div>
-                </template>
-            </StepperPanel>
-            <StepperPanel header="Header 2">
+            <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
-            <StepperPanel header="Header 3">
-                <template #content="{ prevCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,37 +49,36 @@ export default {
             code: {
                 basic: `
 <Stepper orientation="vertical">
-    <StepperPanel header="Header 1">
-        <template #content="{ nextCallback }">
-            <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>
-            <div class="flex gap-2 justify-content-end">
-                <Button label="Next" @click="(event) => nextCallback(event)" />
-            </div>
-        </template>
-    </StepperPanel>
-    <StepperPanel header="Header 2">
+    <StepperPanel header="Header I">
         <template #content="{ prevCallback, nextCallback }">
-            <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>
-            <div class="flex gap-2 justify-content-end">
-                <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                <Button label="Next" @click="(event) => nextCallback(event)" />
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            </div>
+            <div class="flex py-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
-    <StepperPanel header="Header 3">
-        <template #content="{ prevCallback }">
-            <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>
-            <div class="flex gap-2 justify-content-end">
-                <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+    <StepperPanel header="Header II">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            </div>
+            <div class="flex py-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            </div>
+            <div class="flex py-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -90,37 +88,36 @@ export default {
 <template>
     <div class="card">
         <Stepper orientation="vertical">
-            <StepperPanel header="Header 1">
-                <template #content="{ nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
-                    </div>
-                </template>
-            </StepperPanel>
-            <StepperPanel header="Header 2">
+            <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
-            <StepperPanel header="Header 3">
-                <template #content="{ prevCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -132,37 +129,36 @@ export default {
 <template>
     <div class="card">
         <Stepper orientation="vertical">
-            <StepperPanel header="Header 1">
-                <template #content="{ nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
-                    </div>
-                </template>
-            </StepperPanel>
-            <StepperPanel header="Header 2">
+            <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
-                        <Button label="Next" @click="(event) => nextCallback(event)" />
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
-            <StepperPanel header="Header 3">
-                <template #content="{ prevCallback }">
-                    <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>
-                    <div class="flex gap-2 justify-content-end">
-                        <Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex py-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
diff --git a/doc/stepper/theming/StyledDoc.vue b/doc/stepper/theming/StyledDoc.vue
index 66eb4e8e2..b1b8a0e02 100644
--- a/doc/stepper/theming/StyledDoc.vue
+++ b/doc/stepper/theming/StyledDoc.vue
@@ -22,10 +22,6 @@
                         <td>p-stepper-vertical</td>
                         <td>Container element with vertical layout.</td>
                     </tr>
-                    <tr>
-                        <td>p-stepper-nav-container</td>
-                        <td>Container element of navigator container.</td>
-                    </tr>
                     <tr>
                         <td>p-stepper-nav</td>
                         <td>Container element of navigator.</td>
diff --git a/pages/stepper/index.vue b/pages/stepper/index.vue
index fbc38280b..cfdbf170e 100644
--- a/pages/stepper/index.vue
+++ b/pages/stepper/index.vue
@@ -13,8 +13,8 @@
 <script>
 import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/stepper/BasicDoc.vue';
+import ExampleDoc from '@/doc/stepper/ExampleDoc.vue';
 import ImportDoc from '@/doc/stepper/ImportDoc.vue';
-import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
 import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
 import PTComponent from '@/doc/stepper/pt/index.vue';
 import ThemingDoc from '@/doc/stepper/theming/index.vue';
@@ -39,9 +39,9 @@ export default {
                     component: VerticalDoc
                 },
                 {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
                 },
                 {
                     id: 'accessibility',

From 2f353f2c19bec94c316d73c58187be7bda91f9e6 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 21 Feb 2024 10:31:43 +0300
Subject: [PATCH 17/36] Deferred context added

---
 components/doc/codeeditor/services.js         |   2 +-
 doc/galleria/AdvancedDoc.vue                  | 102 +++++++++---------
 doc/galleria/AutoPlayDoc.vue                  |  28 ++---
 doc/galleria/BasicDoc.vue                     |  28 ++---
 doc/galleria/CaptionDoc.vue                   |  36 ++++---
 doc/galleria/ControlledDoc.vue                |  36 ++++---
 doc/galleria/ResponsiveDoc.vue                |  32 +++---
 doc/galleria/ThumbnailDoc.vue                 |  42 ++++----
 doc/galleria/fullscreen/CustomContentDoc.vue  |  56 +++++-----
 doc/galleria/fullscreen/WithThumbnailsDoc.vue |  30 +++---
 .../fullscreen/WithoutThumbnailsDoc.vue       |  30 +++---
 doc/galleria/indicator/ClickEventDoc.vue      |  22 ++--
 doc/galleria/indicator/HoverEventDoc.vue      |  22 ++--
 doc/galleria/indicator/PositionDoc.vue        |  38 ++++---
 doc/galleria/indicator/TemplateDoc.vue        |  28 ++---
 doc/galleria/navigator/HoverDoc.vue           |  28 ++---
 doc/galleria/navigator/IndicatorsDoc.vue      |  38 ++++---
 doc/galleria/navigator/ItemThumbnailsDoc.vue  |  28 ++---
 .../navigator/ItemWithoutThumbnailsDoc.vue    |  28 ++---
 doc/treetable/BasicDoc.vue                    |  22 ++--
 doc/treetable/ColumnToggleDoc.vue             |  30 +++---
 doc/treetable/ControlledDoc.vue               |  24 +++--
 doc/treetable/DynamicColumnsDoc.vue           |  18 ++--
 doc/treetable/FilterDoc.vue                   |  70 ++++++------
 doc/treetable/LazyLoadDoc.vue                 |  37 ++++---
 doc/treetable/ResponsiveDoc.vue               |  22 ++--
 doc/treetable/SizeDoc.vue                     |  26 +++--
 doc/treetable/TemplateDoc.vue                 |  50 +++++----
 doc/treetable/paginator/PaginatorBasicDoc.vue |  67 ++++++------
 .../paginator/PaginatorTemplateDoc.vue        |  92 ++++++++--------
 doc/treetable/resize/ExpandModeDoc.vue        |  22 ++--
 doc/treetable/resize/FitModeDoc.vue           |  22 ++--
 doc/treetable/scroll/FlexibleScrollDoc.vue    |  34 +++---
 doc/treetable/scroll/FrozenColumnsDoc.vue     |  28 ++---
 doc/treetable/scroll/HorizontalScrollDoc.vue  |  28 ++---
 doc/treetable/scroll/VerticalScrollDoc.vue    |  22 ++--
 .../selection/CheckboxRowSelectionDoc.vue     |  22 ++--
 .../selection/MultipleRowsSelectionDoc.vue    |  28 ++---
 .../selection/RowSelectionEventsDoc.vue       |  22 ++--
 .../selection/SingleRowSelectionDoc.vue       |  28 ++---
 doc/treetable/sort/MultipleColumnsDoc.vue     |  22 ++--
 doc/treetable/sort/RemovableSortDoc.vue       |  22 ++--
 doc/treetable/sort/SingleColumnDoc.vue        |  22 ++--
 service/NodeService.js                        |   2 +-
 44 files changed, 801 insertions(+), 635 deletions(-)

diff --git a/components/doc/codeeditor/services.js b/components/doc/codeeditor/services.js
index 768889f96..c245d8f8c 100644
--- a/components/doc/codeeditor/services.js
+++ b/components/doc/codeeditor/services.js
@@ -9726,7 +9726,7 @@ const services = {
                         {
                             key: '7-1',
                             data: {
-                                name: 'primeng.png',
+                                name: 'primevue.png',
                                 size: '30kb',
                                 type: 'Picture'
                             }
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index 991e33eba..dac40d619 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -2,52 +2,54 @@
     <DocSectionText v-bind="$attrs">
         <p>Advanced Galleria implementation with a custom UI.</p>
     </DocSectionText>
-    <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-column': fullScreen }]
-                },
-                content: {
-                    class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
-                },
-                thumbnailwrapper: '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 grid-nogutter justify-content-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </div>
-            </template>
-            <template #footer>
-                <div class="flex align-items-center bg-black-alpha-90 text-white">
-                    <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                    <span v-if="images" class="title-container">
-                        <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
-                        <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
-                        <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
-                    </span>
-                    <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
-                </div>
-            </template>
-        </Galleria>
-    </div>
+    <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-column': fullScreen }]
+                    },
+                    content: {
+                        class: ['relative', { 'flex-1 justify-content-center': fullScreen }]
+                    },
+                    thumbnailwrapper: '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 grid-nogutter justify-content-center">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                    </div>
+                </template>
+                <template #footer>
+                    <div class="flex align-items-center bg-black-alpha-90 text-white">
+                        <Button icon="pi pi-list" @click="onThumbnailButtonClick" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                        <Button :icon="slideButtonIcon" @click="toggleAutoSlide" :pt="{ root: { class: 'border-none border-noround hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                        <span v-if="images" class="title-container">
+                            <span class="text-sm p-3">{{ activeIndex + 1 }}/{{ images.length }}</span>
+                            <span class="font-bold text-sm p-3">{{ images[activeIndex].title }}</span>
+                            <span class="text-sm p-3">{{ images[activeIndex].alt }}</span>
+                        </span>
+                        <Button :icon="fullScreenIcon" @click="toggleFullScreen" :pt="{ root: { class: 'border-none border-noround ml-auto hover:bg-white-alpha-10 text-white', style: 'background: transparent' } }" />
+                    </div>
+                </template>
+            </Galleria>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
 </template>
 
@@ -424,11 +426,11 @@ const slideButtonIcon = computed(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-        this.bindDocumentListeners();
-    },
     methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+            this.bindDocumentListeners();
+        },
         toggleAutoSlide() {
             this.isAutoPlay = !this.isAutoPlay;
         },
diff --git a/doc/galleria/AutoPlayDoc.vue b/doc/galleria/AutoPlayDoc.vue
index 9553e9858..1ddf063a3 100644
--- a/doc/galleria/AutoPlayDoc.vue
+++ b/doc/galleria/AutoPlayDoc.vue
@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
     </DocSectionText>
-    <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 @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>
 
@@ -133,8 +135,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/BasicDoc.vue b/doc/galleria/BasicDoc.vue
index 76585dc76..1ed161743 100644
--- a/doc/galleria/BasicDoc.vue
+++ b/doc/galleria/BasicDoc.vue
@@ -2,16 +2,18 @@
     <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>
-    <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 @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>
 
@@ -130,8 +132,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/CaptionDoc.vue b/doc/galleria/CaptionDoc.vue
index 92d29fbc9..2ba3726e0 100644
--- a/doc/galleria/CaptionDoc.vue
+++ b/doc/galleria/CaptionDoc.vue
@@ -2,20 +2,22 @@
     <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>
-    <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 @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>
 
@@ -146,8 +148,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index 85265cd28..550d8b254 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -2,21 +2,23 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
     </DocSectionText>
-    <div class="card">
-        <div class="mb-3">
-            <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
-        </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="mb-3">
+                <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>
+            <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>
 
@@ -168,10 +170,10 @@ const prev = () => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    },
     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;
         },
diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index a85446ab6..4551440a0 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -2,18 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
     </DocSectionText>
-    <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">
-                <div class="grid grid-nogutter justify-content-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </div>
-            </template>
-        </Galleria>
-    </div>
+    <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">
+                    <div class="grid grid-nogutter justify-content-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>
 
@@ -138,8 +140,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 6a3aacd11..cb3c879e6 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -2,24 +2,26 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails represent a smaller version of the actual content.</p>
     </DocSectionText>
-    <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-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 grid-nogutter justify-content-center">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex flex-wrap gap-3 mb-5">
+                <div v-for="option in positionOptions" :key="option.label" class="flex align-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>
-            </template>
-        </Galleria>
-    </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 grid-nogutter justify-content-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>
 
@@ -213,8 +215,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/fullscreen/CustomContentDoc.vue b/doc/galleria/fullscreen/CustomContentDoc.vue
index c620758ad..f1a895e14 100644
--- a/doc/galleria/fullscreen/CustomContentDoc.vue
+++ b/doc/galleria/fullscreen/CustomContentDoc.vue
@@ -2,33 +2,35 @@
     <DocSectionText v-bind="$attrs">
         <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
     </DocSectionText>
-    <div class="card flex justify-content-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>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-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" style="max-width: 400px">
-            <div v-for="(image, index) of images" :key="index" class="col-4">
-                <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+            <div v-if="images" class="grid" style="max-width: 400px">
+                <div v-for="(image, index) of images" :key="index" class="col-4">
+                    <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+                </div>
             </div>
         </div>
-    </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -191,10 +193,10 @@ const imageClick = (index) => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
-    },
     methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        },
         imageClick(index) {
             this.activeIndex = index;
             this.displayCustom = true;
diff --git a/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
index 1f392833a..4eba2a7a8 100644
--- a/doc/galleria/fullscreen/WithThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
@@ -2,18 +2,20 @@
     <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>
-    <div class="card flex justify-content-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>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-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>
+            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -165,8 +167,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
index 30e1591d2..b35e6ac20 100644
--- a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
@@ -2,18 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails can also be hidden in full screen mode.</p>
     </DocSectionText>
-    <div class="card flex justify-content-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>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-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>
+            <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -165,8 +167,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/indicator/ClickEventDoc.vue b/doc/galleria/indicator/ClickEventDoc.vue
index a007298de..d39f13167 100644
--- a/doc/galleria/indicator/ClickEventDoc.vue
+++ b/doc/galleria/indicator/ClickEventDoc.vue
@@ -2,13 +2,15 @@
     <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>
-    <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 @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>
 
@@ -91,8 +93,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/indicator/HoverEventDoc.vue b/doc/galleria/indicator/HoverEventDoc.vue
index 2053ae6af..a06a66617 100644
--- a/doc/galleria/indicator/HoverEventDoc.vue
+++ b/doc/galleria/indicator/HoverEventDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
     </DocSectionText>
-    <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 @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>
 
@@ -91,8 +93,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue
index 710241c62..84ee10607 100644
--- a/doc/galleria/indicator/PositionDoc.vue
+++ b/doc/galleria/indicator/PositionDoc.vue
@@ -2,23 +2,25 @@
     <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>
-    <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
-                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex flex-wrap gap-3 mb-5">
+                <div v-for="option in positionOptions" :key="option.label" class="flex align-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 align-items-center mb-5">
+                <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>
-        <div class="flex align-items-center mb-5">
-            <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>
 
@@ -181,8 +183,10 @@ const positionOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/indicator/TemplateDoc.vue b/doc/galleria/indicator/TemplateDoc.vue
index 8346a4b70..2c2935d0d 100644
--- a/doc/galleria/indicator/TemplateDoc.vue
+++ b/doc/galleria/indicator/TemplateDoc.vue
@@ -2,16 +2,18 @@
     <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>
-    <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 @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>
 
@@ -103,8 +105,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/navigator/HoverDoc.vue b/doc/galleria/navigator/HoverDoc.vue
index e9079c099..32abd1b91 100644
--- a/doc/galleria/navigator/HoverDoc.vue
+++ b/doc/galleria/navigator/HoverDoc.vue
@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
     </DocSectionText>
-    <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 @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>
 
@@ -130,8 +132,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/navigator/IndicatorsDoc.vue b/doc/galleria/navigator/IndicatorsDoc.vue
index c1d1f6cfc..c8ebf0fbe 100644
--- a/doc/galleria/navigator/IndicatorsDoc.vue
+++ b/doc/galleria/navigator/IndicatorsDoc.vue
@@ -2,16 +2,28 @@
     <DocSectionText v-bind="$attrs">
         <p>Navigators and Indicators can be combined as well.</p>
     </DocSectionText>
-    <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 @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>
 
@@ -145,8 +157,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/navigator/ItemThumbnailsDoc.vue b/doc/galleria/navigator/ItemThumbnailsDoc.vue
index 193c40da4..4b3647af7 100644
--- a/doc/galleria/navigator/ItemThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemThumbnailsDoc.vue
@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
     </DocSectionText>
-    <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 @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>
 
@@ -133,8 +135,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
index 3a2f07348..00aa0106e 100644
--- a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>Simple example with indicators only.</p>
     </DocSectionText>
-    <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 @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>
 
@@ -145,8 +147,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
-        PhotoService.getImages().then((data) => (this.images = data));
+    methods: {
+        loadDemoData() {
+            PhotoService.getImages().then((data) => (this.images = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/BasicDoc.vue b/doc/treetable/BasicDoc.vue
index 45cd3adfb..69a557fde 100644
--- a/doc/treetable/BasicDoc.vue
+++ b/doc/treetable/BasicDoc.vue
@@ -2,13 +2,15 @@
     <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>
-    <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes">
+                <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>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue
index 92bbd2812..c66219773 100644
--- a/doc/treetable/ColumnToggleDoc.vue
+++ b/doc/treetable/ColumnToggleDoc.vue
@@ -2,17 +2,19 @@
     <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>
-    <div class="card">
-        <TreeTable :value="nodes">
-            <template #header>
-                <div style="text-align: left">
-                    <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" 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 @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes">
+                <template #header>
+                    <div style="text-align: left">
+                        <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" 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>
 
@@ -155,10 +157,10 @@ const onToggle = (val) => {
 
         this.selectedColumns = this.columns;
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    },
     methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        },
         onToggle(value) {
             this.selectedColumns = this.columns.filter((col) => value.includes(col));
         }
diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue
index bab4c22e0..6aea3fc99 100644
--- a/doc/treetable/ControlledDoc.vue
+++ b/doc/treetable/ControlledDoc.vue
@@ -2,14 +2,16 @@
     <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>
-    <div class="card">
-        <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <Button @click="toggleApplications" label="Toggle Applications" />
+            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4">
+                <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>
 
@@ -131,10 +133,10 @@ const toggleApplications = () => {
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    },
     methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        },
         toggleApplications() {
             let _expandedKeys = { ...this.expandedKeys };
 
diff --git a/doc/treetable/DynamicColumnsDoc.vue b/doc/treetable/DynamicColumnsDoc.vue
index 2dbfae8e4..c45415367 100644
--- a/doc/treetable/DynamicColumnsDoc.vue
+++ b/doc/treetable/DynamicColumnsDoc.vue
@@ -2,11 +2,13 @@
     <DocSectionText v-bind="$attrs">
         <p>Columns can be created programmatically.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes">
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes">
+                <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>
 
@@ -119,8 +121,10 @@ const columns = ref([
             { field: 'type', header: 'Type' }
         ];
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index b459a75ec..5d746675f 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -6,38 +6,40 @@
             support filtering.
         </p>
     </DocSectionText>
-    <div class="card">
-        <div class="flex justify-content-center mb-4">
-            <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-content-center mb-4">
+                <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+            </div>
+            <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
+                <template #header>
+                    <div class="text-right">
+                        <IconField iconPosition="left">
+                            <InputIcon>
+                                <i class="pi pi-search" />
+                            </InputIcon>
+                            <InputText v-model="filters['global']" placeholder="Global Search" />
+                        </IconField>
+                    </div>
+                </template>
+                <Column field="name" header="Name" expander>
+                    <template #filter>
+                        <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
+                    </template>
+                </Column>
+                <Column field="size" header="Size">
+                    <template #filter>
+                        <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
+                    </template>
+                </Column>
+                <Column field="type" header="Type">
+                    <template #filter>
+                        <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
+                    </template>
+                </Column>
+            </TreeTable>
         </div>
-        <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
-            <template #header>
-                <div class="text-right">
-                    <IconField iconPosition="left">
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
-                        <InputText v-model="filters['global']" placeholder="Global Search" />
-                    </IconField>
-                </div>
-            </template>
-            <Column field="name" header="Name" expander>
-                <template #filter>
-                    <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
-                </template>
-            </Column>
-            <Column field="size" header="Size">
-                <template #filter>
-                    <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
-                </template>
-            </Column>
-            <Column field="type" header="Type">
-                <template #filter>
-                    <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
-                </template>
-            </Column>
-        </TreeTable>
-    </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -226,8 +228,10 @@ const filterOptions = ref([
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/LazyLoadDoc.vue b/doc/treetable/LazyLoadDoc.vue
index 4145c9747..8280855fb 100644
--- a/doc/treetable/LazyLoadDoc.vue
+++ b/doc/treetable/LazyLoadDoc.vue
@@ -10,13 +10,15 @@
         </p>
         <p>In addition, only the root elements should be loaded, children can be loaded on demand using <i>nodeExpand</i> callback.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
+                <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>
 
@@ -147,7 +149,7 @@ export default {
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
         </TreeTable>
-    </div>                   
+    </div>
 </template>
 
 <script setup>
@@ -237,16 +239,17 @@ const loadNodes = (first, rows) => {
             }
         };
     },
-    mounted() {
-        this.loading = true;
-
-        setTimeout(() => {
-            this.loading = false;
-            this.nodes = this.loadNodes(0, this.rows);
-            this.totalRecords = 1000;
-        }, 1000);
-    },
     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;
diff --git a/doc/treetable/ResponsiveDoc.vue b/doc/treetable/ResponsiveDoc.vue
index 295af8fc9..4a400fc91 100644
--- a/doc/treetable/ResponsiveDoc.vue
+++ b/doc/treetable/ResponsiveDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>A horizontal scrollbar is displayed when parent of the table gets smaller than the defined <i>minWidth</i>.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
+                <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>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue
index 23ab49d85..33f23c7af 100644
--- a/doc/treetable/SizeDoc.vue
+++ b/doc/treetable/SizeDoc.vue
@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
     </DocSectionText>
-    <div class="card">
-        <div class="flex justify-content-center mb-4">
-            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-content-center mb-4">
+                <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+            </div>
+            <TreeTable :value="nodes" :class="`p-treetable-${size.class}`">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
         </div>
-        <TreeTable :value="nodes" :class="`p-treetable-${size.class}`">
-            <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>
 
@@ -127,8 +129,10 @@ const sizeOptions = ref([
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 6cafefdc3..d19c9c78c 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -2,29 +2,31 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes">
-            <template #header>
-                <div class="text-xl font-bold">File Viewer</div>
-            </template>
-            <Column field="name" header="Name" :expander="true"></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-            <Column headerStyle="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" />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes">
+                <template #header>
+                    <div class="text-xl font-bold">File Viewer</div>
+                </template>
+                <Column field="name" header="Name" :expander="true"></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+                <Column headerStyle="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-content-start">
+                        <Button icon="pi pi-refresh" label="Reload" severity="warning" />
                     </div>
                 </template>
-            </Column>
-            <template #footer>
-                <div class="flex justify-content-start">
-                    <Button icon="pi pi-refresh" label="Reload" severity="warning" />
-                </div>
-            </template>
-        </TreeTable>
-    </div>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -170,8 +172,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/paginator/PaginatorBasicDoc.vue b/doc/treetable/paginator/PaginatorBasicDoc.vue
index 7a4b270b2..439e0ac90 100644
--- a/doc/treetable/paginator/PaginatorBasicDoc.vue
+++ b/doc/treetable/paginator/PaginatorBasicDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
+                <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>
 
@@ -115,39 +117,42 @@ for (let i = 0; i < 50; i++) {
 }
 
 nodes.value = files;
-    
+
 <\/script>
 `
             }
         };
     },
-    mounted() {
-        let files = [];
+    mounted() {},
+    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
+            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);
+                files.push(node);
+            }
+
+            this.nodes = files;
         }
-
-        this.nodes = files;
     }
 };
 </script>
diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue
index 8c7a59a9e..1894acabc 100644
--- a/doc/treetable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue
@@ -5,26 +5,28 @@
             <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
         </p>
     </DocSectionText>
-    <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}"
-        >
-            <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" text />
-            </template>
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-            <template #paginatorend>
-                <Button type="button" icon="pi pi-download" text />
-            </template>
-        </TreeTable>
-    </div>
+    <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}"
+            >
+                <template #paginatorstart>
+                    <Button type="button" icon="pi pi-refresh" text />
+                </template>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+                <template #paginatorend>
+                    <Button type="button" icon="pi pi-download" text />
+                </template>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" />
 </template>
 
@@ -155,39 +157,41 @@ for (let i = 0; i < 50; i++) {
 }
 
 nodes.value = files;
-    
+
 <\/script>
 `
             }
         };
     },
-    mounted() {
-        let files = [];
+    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
+            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);
+                files.push(node);
+            }
+
+            this.nodes = files;
         }
-
-        this.nodes = files;
     }
 };
 </script>
diff --git a/doc/treetable/resize/ExpandModeDoc.vue b/doc/treetable/resize/ExpandModeDoc.vue
index 96e9b8f3d..3d92d351f 100644
--- a/doc/treetable/resize/ExpandModeDoc.vue
+++ b/doc/treetable/resize/ExpandModeDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '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>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/resize/FitModeDoc.vue b/doc/treetable/resize/FitModeDoc.vue
index 9f1359e2d..6dd545529 100644
--- a/doc/treetable/resize/FitModeDoc.vue
+++ b/doc/treetable/resize/FitModeDoc.vue
@@ -5,13 +5,15 @@
             that does not change the overall table width.
         </p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '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>
 
@@ -109,8 +111,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue
index f6660a2a8..568df653f 100644
--- a/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ b/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -5,20 +5,22 @@
             adjusts itself according to the size changes.
         </p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+    <DeferredDemo @load="loadDemoData">
+        <div class="card flex justify-content-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">
-                <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>
+            <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+                    <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>
 
@@ -110,8 +112,10 @@ const dialogVisible = ref(false);
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue
index c66c24ddc..d559ff15e 100644
--- a/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ b/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -2,16 +2,18 @@
     <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>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
-            <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
-            <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
-            <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
-            <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
-            <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
-            <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
+                <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
+                <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
+                <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
+                <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
+                <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
+                <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -118,8 +120,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue
index 5c6cd2e07..cdbd431fb 100644
--- a/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ b/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -2,16 +2,18 @@
     <DocSectionText v-bind="$attrs">
         <p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
-            <Column field="name" header="Name" expander style="width: 250px"></Column>
-            <Column field="size" header="Size" style="width: 250px"></Column>
-            <Column field="type" header="Type 2" style="width: 250px"></Column>
-            <Column field="size" header="Size 2" style="width: 250px"></Column>
-            <Column field="type" header="Type 3" style="width: 250px"></Column>
-            <Column field="size" header="Size 3" style="width: 250px"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
+                <Column field="name" header="Name" expander style="width: 250px"></Column>
+                <Column field="size" header="Size" style="width: 250px"></Column>
+                <Column field="type" header="Type 2" style="width: 250px"></Column>
+                <Column field="size" header="Size 2" style="width: 250px"></Column>
+                <Column field="type" header="Type 3" style="width: 250px"></Column>
+                <Column field="size" header="Size 3" style="width: 250px"></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -118,8 +120,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue
index 6e496ac22..361af26ff 100644
--- a/doc/treetable/scroll/VerticalScrollDoc.vue
+++ b/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -2,13 +2,15 @@
     <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>
-    <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="270px">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" scrollable scrollHeight="270px">
+                <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>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 49fcf3042..3bdd2e77e 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -6,13 +6,15 @@
         </p>
     </DocSectionText>
     <DocSectionCode :code="introCode" hideToggleCode importCode hideStackBlitz />
-    <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
+                <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>
 
@@ -123,8 +125,10 @@ const selectedKey = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index 5fbc9b89c..611e27a4f 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -6,17 +6,19 @@
         </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 justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch v-model="metaKey" inputId="input-metakey" />
+                <label for="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
         </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
-            <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>
 
@@ -130,8 +132,10 @@ const metaKey = ref(true);
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/selection/RowSelectionEventsDoc.vue b/doc/treetable/selection/RowSelectionEventsDoc.vue
index 550d056a6..031defc30 100644
--- a/doc/treetable/selection/RowSelectionEventsDoc.vue
+++ b/doc/treetable/selection/RowSelectionEventsDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>TreeTable provides <i>nodeSelect</i> and <i>nodeUnselect</i> events to listen selection events.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false">
+                <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>
 
@@ -130,10 +132,10 @@ const onNodeUnselect = (node) => {
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    },
     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 });
         },
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index ef72f1b5f..d5abe1c95 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -6,17 +6,19 @@
             setting it to false.
         </p>
     </DocSectionText>
-    <div class="card">
-        <div class="flex justify-content-center align-items-center mb-4 gap-2">
-            <InputSwitch v-model="metaKey" inputId="input-metakey" />
-            <label for="input-metakey">MetaKey</label>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <div class="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch v-model="metaKey" inputId="input-metakey" />
+                <label for="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
         </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
-            <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>
 
@@ -130,8 +132,10 @@ const metaKey = ref(true);
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/sort/MultipleColumnsDoc.vue b/doc/treetable/sort/MultipleColumnsDoc.vue
index c91a5a2ca..9d3855bcd 100644
--- a/doc/treetable/sort/MultipleColumnsDoc.vue
+++ b/doc/treetable/sort/MultipleColumnsDoc.vue
@@ -2,13 +2,15 @@
     <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>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" sortMode="multiple">
+                <Column field="name" header="Name" sortable expander></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/sort/RemovableSortDoc.vue b/doc/treetable/sort/RemovableSortDoc.vue
index 322adeaac..70d5846ec 100644
--- a/doc/treetable/sort/RemovableSortDoc.vue
+++ b/doc/treetable/sort/RemovableSortDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" removableSort>
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes" sortMode="multiple" removableSort>
+                <Column field="name" header="Name" sortable expander></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/doc/treetable/sort/SingleColumnDoc.vue b/doc/treetable/sort/SingleColumnDoc.vue
index cb38a164b..3278b0075 100644
--- a/doc/treetable/sort/SingleColumnDoc.vue
+++ b/doc/treetable/sort/SingleColumnDoc.vue
@@ -2,13 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
     </DocSectionText>
-    <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
-        </TreeTable>
-    </div>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <TreeTable :value="nodes">
+                <Column field="name" header="Name" sortable expander></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    methods: {
+        loadDemoData() {
+            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+        }
     }
 };
 </script>
diff --git a/service/NodeService.js b/service/NodeService.js
index d6877ccad..e10b0809e 100755
--- a/service/NodeService.js
+++ b/service/NodeService.js
@@ -377,7 +377,7 @@ export const NodeService = {
                     {
                         key: '7-1',
                         data: {
-                            name: 'primeng.png',
+                            name: 'primevue.png',
                             size: '30kb',
                             type: 'Picture'
                         }

From eb2f175f739d921c2c0fe1a9f779fa5d0cde1e27 Mon Sep 17 00:00:00 2001
From: Amal Mathew <amal.mathew@qburst.com>
Date: Wed, 21 Feb 2024 13:53:11 +0530
Subject: [PATCH 18/36] #5314: Fix invalid prop in filled password example

---
 doc/password/FilledDoc.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/password/FilledDoc.vue b/doc/password/FilledDoc.vue
index d5f2c51e4..624227ea0 100644
--- a/doc/password/FilledDoc.vue
+++ b/doc/password/FilledDoc.vue
@@ -3,7 +3,7 @@
         <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-content-center">
-        <Password v-model="value" :feedback="false" invalid variant="filled" />
+        <Password v-model="value" :feedback="false" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>

From 15c78606246cd4ca777300cac8f0b28f55729355 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 21 Feb 2024 11:44:30 +0300
Subject: [PATCH 19/36] Refactor #5266

---
 components/lib/stepper/Stepper.vue           | 4 ++--
 components/lib/stepper/style/StepperStyle.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index e4a967517..2b449835e 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -232,12 +232,12 @@ export default {
         },
         prevCallback(event, index) {
             if (index !== 0) {
-                this.onItemClick(event, index - 1);
+                this.updateActiveStep(event, index - 1);
             }
         },
         nextCallback(event, index) {
             if (index !== this.stepperpanels.length - 1) {
-                this.onItemClick(event, index + 1);
+                this.updateActiveStep(event, index + 1);
             }
         }
     },
diff --git a/components/lib/stepper/style/StepperStyle.js b/components/lib/stepper/style/StepperStyle.js
index f1578ac23..e339c57bf 100644
--- a/components/lib/stepper/style/StepperStyle.js
+++ b/components/lib/stepper/style/StepperStyle.js
@@ -15,7 +15,7 @@ const classes = {
             'p-stepper-header',
             {
                 'p-highlight': instance.isStepActive(index),
-                'p-disabled': instance.isItemDisabled(step, index)
+                'p-disabled': instance.isItemDisabled(index)
             }
         ],
         action: 'p-stepper-action',

From 874c321b512b779798dec1afb15edc46edf7690c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 21 Feb 2024 11:47:21 +0300
Subject: [PATCH 20/36] Linear Stepper added

---
 doc/stepper/LinearDoc.vue                     | 174 ++++++++++++++++++
 .../{ExampleDoc.vue => TemplateDoc.vue}       |   0
 pages/stepper/index.vue                       |  14 +-
 3 files changed, 184 insertions(+), 4 deletions(-)
 create mode 100644 doc/stepper/LinearDoc.vue
 rename doc/stepper/{ExampleDoc.vue => TemplateDoc.vue} (100%)

diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
new file mode 100644
index 000000000..7e3607560
--- /dev/null
+++ b/doc/stepper/LinearDoc.vue
@@ -0,0 +1,174 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Stepper consists of one or more StepperPanel elements.</p>
+    </DocSectionText>
+    <div class="card">
+        <Stepper v-model:activeStep="active" linear>
+            <StepperPanel header="Header I">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            code: {
+                basic: `
+<Stepper>
+    <StepperPanel header="Header I">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Stepper>
+            <StepperPanel header="Header I">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Stepper>
+            <StepperPanel header="Header I">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/stepper/ExampleDoc.vue b/doc/stepper/TemplateDoc.vue
similarity index 100%
rename from doc/stepper/ExampleDoc.vue
rename to doc/stepper/TemplateDoc.vue
diff --git a/pages/stepper/index.vue b/pages/stepper/index.vue
index cfdbf170e..6798e5b48 100644
--- a/pages/stepper/index.vue
+++ b/pages/stepper/index.vue
@@ -13,8 +13,9 @@
 <script>
 import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/stepper/BasicDoc.vue';
-import ExampleDoc from '@/doc/stepper/ExampleDoc.vue';
 import ImportDoc from '@/doc/stepper/ImportDoc.vue';
+import LinearDoc from '@/doc/stepper/LinearDoc.vue';
+import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
 import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
 import PTComponent from '@/doc/stepper/pt/index.vue';
 import ThemingDoc from '@/doc/stepper/theming/index.vue';
@@ -39,9 +40,14 @@ export default {
                     component: VerticalDoc
                 },
                 {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
+                    id: 'linear',
+                    label: 'Linear',
+                    component: LinearDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
                 },
                 {
                     id: 'accessibility',

From 8a0dc7c2944c3ef1d9950838667b49178b3973b0 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 21 Feb 2024 12:05:55 +0300
Subject: [PATCH 21/36] Typo fix

---
 components/lib/stepper/Stepper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 2b449835e..0c8d211b8 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -147,7 +147,7 @@ import StepperSeparator from './StepperSeparator.vue';
 export default {
     name: 'Stepper',
     extends: BaseStepper,
-    nheritAttrs: false,
+    inheritAttrs: false,
     emits: ['update:activeStep', 'step-change'],
     data() {
         return {

From c555e258c003f1599f15ad9d68772b1484d8c5d3 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 21 Feb 2024 16:21:01 +0300
Subject: [PATCH 22/36] Padding added demos

---
 doc/stepper/BasicDoc.vue    | 2 +-
 doc/stepper/LinearDoc.vue   | 2 +-
 doc/stepper/TemplateDoc.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index ae54150a5..182a4ba12 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper consists of one or more StepperPanel elements.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
         <Stepper>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index 7e3607560..4ce828370 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper consists of one or more StepperPanel elements.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
         <Stepper v-model:activeStep="active" linear>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index b602111d6..b2ef874f1 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
     </DocSectionText>
-    <div class="card flex flex-column justify-content-center">
+    <div class="card flex flex-column justify-content-center" style="padding-left: 20rem; padding-right: 20rem">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
                 <template #header="{ index, clickCallback, headerClass, numberClass }">

From 067da063a8a0d319d3bd89ba678df00dc35f791d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 21 Feb 2024 21:38:16 +0300
Subject: [PATCH 23/36] Initiated InputOtp

---
 api-generator/components/inputotp.js          |  80 ++++
 assets/menu/menu.json                         |   5 +
 components/lib/inputotp/BaseInputOtp.vue      |  53 +++
 components/lib/inputotp/InputOtp.d.ts         | 227 +++++++++
 components/lib/inputotp/InputOtp.spec.js      |  20 +
 components/lib/inputotp/InputOtp.vue          | 155 +++++++
 components/lib/inputotp/package.json          |   9 +
 .../lib/inputotp/style/InputOtpStyle.d.ts     |   3 +
 .../lib/inputotp/style/InputOtpStyle.js       |  11 +
 components/lib/inputotp/style/package.json    |   6 +
 doc/common/apidoc/index.json                  | 431 +++++++++++++++++-
 doc/inputotp/AccessibilityDoc.vue             |  32 ++
 doc/inputotp/BasicDoc.vue                     |  54 +++
 doc/inputotp/ImportDoc.vue                    |  18 +
 doc/inputotp/IntegerOnlyDoc.vue               |  54 +++
 doc/inputotp/MaskDoc.vue                      |  54 +++
 doc/inputotp/pt/PTImage.vue                   |   8 +
 doc/inputotp/pt/index.vue                     |  35 ++
 doc/inputotp/theming/StyledDoc.vue            |  29 ++
 doc/inputotp/theming/TailwindDoc.vue          |   6 +
 doc/inputotp/theming/index.vue                |  40 ++
 .../runtime/core/components/index.js          |   1 +
 nuxt-vite.config.js                           |   1 +
 pages/inputotp/index.vue                      |  49 ++
 public/themes/arya-blue/theme.css             |  11 +
 public/themes/arya-green/theme.css            |  11 +
 public/themes/arya-orange/theme.css           |  11 +
 public/themes/arya-purple/theme.css           |  11 +
 public/themes/aura-dark-amber/theme.css       |  11 +
 public/themes/aura-dark-blue/theme.css        |  11 +
 public/themes/aura-dark-cyan/theme.css        |  11 +
 public/themes/aura-dark-green/theme.css       |  11 +
 public/themes/aura-dark-indigo/theme.css      |  11 +
 public/themes/aura-dark-lime/theme.css        |  11 +
 public/themes/aura-dark-noir/theme.css        |  11 +
 public/themes/aura-dark-pink/theme.css        |  11 +
 public/themes/aura-dark-purple/theme.css      |  11 +
 public/themes/aura-dark-teal/theme.css        |  11 +
 public/themes/aura-light-amber/theme.css      |  11 +
 public/themes/aura-light-blue/theme.css       |  11 +
 public/themes/aura-light-cyan/theme.css       |  11 +
 public/themes/aura-light-green/theme.css      |  11 +
 public/themes/aura-light-indigo/theme.css     |  11 +
 public/themes/aura-light-lime/theme.css       |  11 +
 public/themes/aura-light-noir/theme.css       |  11 +
 public/themes/aura-light-pink/theme.css       |  11 +
 public/themes/aura-light-purple/theme.css     |  11 +
 public/themes/aura-light-teal/theme.css       |  11 +
 public/themes/bootstrap4-dark-blue/theme.css  |  11 +
 .../themes/bootstrap4-dark-purple/theme.css   |  11 +
 public/themes/bootstrap4-light-blue/theme.css |  11 +
 .../themes/bootstrap4-light-purple/theme.css  |  11 +
 public/themes/fluent-light/theme.css          |  11 +
 public/themes/lara-dark-amber/theme.css       |  11 +
 public/themes/lara-dark-blue/theme.css        |  11 +
 public/themes/lara-dark-cyan/theme.css        |  11 +
 public/themes/lara-dark-green/theme.css       |  11 +
 public/themes/lara-dark-indigo/theme.css      |  11 +
 public/themes/lara-dark-pink/theme.css        |  11 +
 public/themes/lara-dark-purple/theme.css      |  11 +
 public/themes/lara-dark-teal/theme.css        |  11 +
 public/themes/lara-light-amber/theme.css      |  11 +
 public/themes/lara-light-blue/theme.css       |  11 +
 public/themes/lara-light-cyan/theme.css       |  11 +
 public/themes/lara-light-green/theme.css      |  11 +
 public/themes/lara-light-indigo/theme.css     |  11 +
 public/themes/lara-light-pink/theme.css       |  11 +
 public/themes/lara-light-purple/theme.css     |  11 +
 public/themes/lara-light-teal/theme.css       |  11 +
 public/themes/luna-amber/theme.css            |  11 +
 public/themes/luna-blue/theme.css             |  11 +
 public/themes/luna-green/theme.css            |  11 +
 public/themes/luna-pink/theme.css             |  11 +
 public/themes/md-dark-deeppurple/theme.css    |  11 +
 public/themes/md-dark-indigo/theme.css        |  11 +
 public/themes/md-light-deeppurple/theme.css   |  11 +
 public/themes/md-light-indigo/theme.css       |  11 +
 public/themes/mdc-dark-deeppurple/theme.css   |  11 +
 public/themes/mdc-dark-indigo/theme.css       |  11 +
 public/themes/mdc-light-deeppurple/theme.css  |  11 +
 public/themes/mdc-light-indigo/theme.css      |  11 +
 public/themes/mira/theme.css                  |  11 +
 public/themes/nano/theme.css                  |  11 +
 public/themes/nova-accent/theme.css           |  11 +
 public/themes/nova-alt/theme.css              |  11 +
 public/themes/nova-vue/theme.css              |  11 +
 public/themes/nova/theme.css                  |  11 +
 public/themes/rhea/theme.css                  |  11 +
 public/themes/saga-blue/theme.css             |  11 +
 public/themes/saga-green/theme.css            |  11 +
 public/themes/saga-orange/theme.css           |  11 +
 public/themes/saga-purple/theme.css           |  11 +
 public/themes/soho-dark/theme.css             |  11 +
 public/themes/soho-light/theme.css            |  11 +
 public/themes/tailwind-light/theme.css        |  11 +
 public/themes/vela-blue/theme.css             |  11 +
 public/themes/vela-green/theme.css            |  11 +
 public/themes/vela-orange/theme.css           |  11 +
 public/themes/vela-purple/theme.css           |  11 +
 public/themes/viva-dark/theme.css             |  11 +
 public/themes/viva-light/theme.css            |  11 +
 rollup.config.js                              |   1 +
 102 files changed, 2228 insertions(+), 1 deletion(-)
 create mode 100644 api-generator/components/inputotp.js
 create mode 100644 components/lib/inputotp/BaseInputOtp.vue
 create mode 100755 components/lib/inputotp/InputOtp.d.ts
 create mode 100644 components/lib/inputotp/InputOtp.spec.js
 create mode 100755 components/lib/inputotp/InputOtp.vue
 create mode 100644 components/lib/inputotp/package.json
 create mode 100644 components/lib/inputotp/style/InputOtpStyle.d.ts
 create mode 100644 components/lib/inputotp/style/InputOtpStyle.js
 create mode 100644 components/lib/inputotp/style/package.json
 create mode 100644 doc/inputotp/AccessibilityDoc.vue
 create mode 100644 doc/inputotp/BasicDoc.vue
 create mode 100644 doc/inputotp/ImportDoc.vue
 create mode 100644 doc/inputotp/IntegerOnlyDoc.vue
 create mode 100644 doc/inputotp/MaskDoc.vue
 create mode 100644 doc/inputotp/pt/PTImage.vue
 create mode 100644 doc/inputotp/pt/index.vue
 create mode 100644 doc/inputotp/theming/StyledDoc.vue
 create mode 100644 doc/inputotp/theming/TailwindDoc.vue
 create mode 100644 doc/inputotp/theming/index.vue
 create mode 100644 pages/inputotp/index.vue

diff --git a/api-generator/components/inputotp.js b/api-generator/components/inputotp.js
new file mode 100644
index 000000000..c4a86f705
--- /dev/null
+++ b/api-generator/components/inputotp.js
@@ -0,0 +1,80 @@
+const InputSwitchProps = [
+    {
+        name: 'modelValue',
+        type: 'boolean',
+        default: 'null',
+        description: 'Specifies whether a inputswitch should be checked or not.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputSwitchEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+module.exports = {
+    inputswitch: {
+        name: 'InputSwitch',
+        description: 'InputSwitch is used to select a boolean value.',
+        props: InputSwitchProps,
+        events: InputSwitchEvents
+    }
+};
diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index ce32aa7a0..f0dc6cc2e 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -115,6 +115,11 @@
                             "name": "InputNumber",
                             "to": "/inputnumber"
                         },
+                        {
+                            "name": "InputOtp",
+                            "to": "/inputotp",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "InputSwitch",
                             "to": "/inputswitch"
diff --git a/components/lib/inputotp/BaseInputOtp.vue b/components/lib/inputotp/BaseInputOtp.vue
new file mode 100644
index 000000000..b05b42582
--- /dev/null
+++ b/components/lib/inputotp/BaseInputOtp.vue
@@ -0,0 +1,53 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import InputOtpStyle from 'primevue/inputotp/style';
+
+export default {
+    name: 'BaseInputOtp',
+    extends: BaseComponent,
+    props: {
+        modelValue: {
+            type: null,
+            default: false
+        },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        variant: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
+        length: {
+            type: Number,
+            default: 4
+        },
+        mask: {
+            type: Boolean,
+            default: false
+        },
+        integerOnly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    style: InputOtpStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts
new file mode 100755
index 000000000..83506dbf9
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.d.ts
@@ -0,0 +1,227 @@
+/**
+ *
+ * InputSwitch is used to select a boolean value.
+ *
+ * [Live Demo](https://www.primevue.org/inputswitch/)
+ *
+ * @module inputotp
+ *
+ */
+import { ComponentHooks } from '../basecomponent/BaseComponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputSwitchPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: InputSwitchProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InputSwitchState;
+    /**
+     * Defines current options.
+     */
+    context: InputSwitchContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputSwitchProps.pt}
+ */
+export interface InputSwitchPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputSwitchPassThroughOptionType;
+    /**
+     * Used to pass attributes to the input's DOM element.
+     */
+    input?: InputSwitchPassThroughOptionType;
+    /**
+     * Used to pass attributes to the slider's DOM element.
+     */
+    slider?: InputSwitchPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputSwitchPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InputSwitch component.
+ */
+export interface InputSwitchState {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputSwitch component.
+ */
+export interface InputSwitchProps {
+    /**
+     * Specifies whether a inputswitch should be checked or not.
+     * @defaultValue false
+     */
+    modelValue?: boolean | string | undefined;
+    /**
+     * Value in checked state.
+     * @defaultValue true
+     */
+    trueValue?: any;
+    /**
+     * Value in unchecked state.
+     * @defaultValue false
+     */
+    falseValue?: any;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * 	Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: string | object | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {InputSwitchPassThroughOptions}
+     */
+    pt?: PassThrough<InputSwitchPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines current options in InputSwitch component.
+ */
+export interface InputSwitchContext {
+    /**
+     * Current checked state of the item as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+export interface InputSwitchSlots {}
+
+/**
+ * Defines valid emits in InputSwitch component.
+ */
+export interface InputSwitchEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {boolean} value - New value.
+     */
+    'update:modelValue'(value: boolean): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {Event} event - Browser event.
+     */
+    change(event: Event): void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
+}
+
+/**
+ * **PrimeVue - InputSwitch**
+ *
+ * _InputSwitch is used to select a boolean value._
+ *
+ * [Live Demo](https://www.primevue.org/inputswitch/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputSwitch: GlobalComponentConstructor<InputSwitch>;
+    }
+}
+
+export default InputSwitch;
diff --git a/components/lib/inputotp/InputOtp.spec.js b/components/lib/inputotp/InputOtp.spec.js
new file mode 100644
index 000000000..df8f16fc5
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.spec.js
@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils';
+import InputSwitch from './InputSwitch.vue';
+
+describe('InputSwitch.vue', () => {
+    it('should exist', async () => {
+        const wrapper = mount(InputSwitch);
+
+        expect(wrapper.find('.p-inputswitch.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-inputswitch-slider').exists()).toBe(true);
+
+        await wrapper.vm.onChange({});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+        await wrapper.setProps({ modelValue: true });
+
+        expect(wrapper.vm.checked).toBe(true);
+        expect(wrapper.find('.p-inputswitch').classes()).toContain('p-highlight');
+    });
+});
diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
new file mode 100755
index 000000000..9522cb48d
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.vue
@@ -0,0 +1,155 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <OtpInputText
+            v-for="i in length"
+            :key="i"
+            v-model="tokens[i - 1]"
+            :type="inputType"
+            :class="cx('input')"
+            maxlength="1"
+            :inputmode="inputMode"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @paste="onPaste"
+            @keydown="onKeyDown($event, i - 1)"
+            :pt="ptm('input')"
+        />
+    </div>
+</template>
+
+<script>
+import InputText from 'primevue/inputtext';
+import BaseInputOtp from './BaseInputOtp.vue';
+
+export default {
+    name: 'InputOtp',
+    extends: BaseInputOtp,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    data() {
+        return {
+            tokens: []
+        };
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.tokens = newValue ? newValue.split('') : new Array(this.length);
+            }
+        }
+    },
+    methods: {
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onInput(event) {
+            this.moveToNext(event);
+            this.updateModel(event);
+        },
+        updateModel(event) {
+            const newValue = this.tokens.join('');
+
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', {
+                originalEvent: event,
+                value: newValue
+            });
+        },
+        moveToPrev(event) {
+            var prevElement = event.target.previousElementSibling;
+
+            if (prevElement) {
+                prevElement.focus();
+                prevElement.select();
+            }
+        },
+        moveToNext(event) {
+            var nextElement = event.target.nextElementSibling;
+
+            if (nextElement) {
+                nextElement.focus();
+                nextElement.select();
+            }
+        },
+        onFocus(event) {
+            event.target.select();
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
+        },
+        onKeyDown(event, index) {
+            const keyCode = event.keyCode;
+
+            switch (keyCode) {
+                case 37:
+                    this.moveToPrev(event);
+                    event.preventDefault();
+
+                    break;
+
+                case 38:
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
+                case 39:
+                    this.moveToNext(event);
+                    event.preventDefault();
+
+                    break;
+
+                case 8:
+                    event.preventDefault();
+                    this.tokens[index] = '';
+                    this.moveToPrev(event);
+                    this.updateModel(event);
+
+                    break;
+
+                default:
+                    if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+        },
+        onPaste(event) {
+            let paste = event.clipboardData.getData('text');
+
+            if (paste.length) {
+                let pastedCode = paste.substring(0, this.length + 1);
+
+                if (!this.isIntegerOnly || !isNaN(pastedCode)) {
+                    this.tokens = pastedCode.split('');
+                    this.updateModel(event);
+                }
+            }
+
+            event.preventDefault();
+        }
+    },
+    computed: {
+        inputMode() {
+            return this.integerOnly ? 'number' : 'text';
+        },
+        inputType() {
+            return this.mask ? 'password' : 'text';
+        }
+    },
+    components: {
+        OtpInputText: InputText
+    }
+};
+</script>
diff --git a/components/lib/inputotp/package.json b/components/lib/inputotp/package.json
new file mode 100644
index 000000000..39b0a1db3
--- /dev/null
+++ b/components/lib/inputotp/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./inputotp.cjs.js",
+    "module": "./inputotp.esm.js",
+    "unpkg": "./inputotp.min.js",
+    "types": "./inputotp.d.ts",
+    "browser": {
+        "./sfc": "./inputotp.vue"
+    }
+}
diff --git a/components/lib/inputotp/style/InputOtpStyle.d.ts b/components/lib/inputotp/style/InputOtpStyle.d.ts
new file mode 100644
index 000000000..c52582775
--- /dev/null
+++ b/components/lib/inputotp/style/InputOtpStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style/BaseStyle';
+
+export interface InputOtpStyle extends BaseStyle {}
diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js
new file mode 100644
index 000000000..f1a9db114
--- /dev/null
+++ b/components/lib/inputotp/style/InputOtpStyle.js
@@ -0,0 +1,11 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ props }) => ['p-inputotp p-component'],
+    input: 'p-inputotp-input'
+};
+
+export default BaseStyle.extend({
+    name: 'inputotp',
+    classes
+});
diff --git a/components/lib/inputotp/style/package.json b/components/lib/inputotp/style/package.json
new file mode 100644
index 000000000..47e678339
--- /dev/null
+++ b/components/lib/inputotp/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./inputotpstyle.cjs.js",
+    "module": "./inputotpstyle.esm.js",
+    "unpkg": "./inputotpstyle.min.js",
+    "types": "./inputotpstyle.d.ts"
+}
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 44c59e757..1257694f1 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -5418,7 +5418,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
+                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
                 }
             }
         }
@@ -31974,6 +31974,435 @@
             }
         }
     },
+    "inputotp": {
+        "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
+        "components": {
+            "default": {
+                "description": "InputSwitch is used to select a boolean value.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputSwitchPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputSwitchProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the slider's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchState": {
+                    "description": "Defines current inline state in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchProps": {
+                    "description": "Defines valid properties in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | boolean",
+                            "default": "false",
+                            "description": "Specifies whether a inputswitch should be checked or not."
+                        },
+                        {
+                            "name": "trueValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "true",
+                            "description": "Value in checked state."
+                        },
+                        {
+                            "name": "falseValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "false",
+                            "description": "Value in unchecked state."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "inputClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<InputSwitchPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchContext": {
+                    "description": "Defines current options in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current checked state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchSlots": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": []
+                },
+                "InputSwitchEmits": {
+                    "description": "Defines valid emits in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component receives focus."
+                        },
+                        {
+                            "name": "blur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component loses focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputSwitchPassThroughOptionType": {
+                    "values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "inputotp/style/InputOtpStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "inputswitch": {
         "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
         "components": {
diff --git a/doc/inputotp/AccessibilityDoc.vue b/doc/inputotp/AccessibilityDoc.vue
new file mode 100644
index 000000000..29470c777
--- /dev/null
+++ b/doc/inputotp/AccessibilityDoc.vue
@@ -0,0 +1,32 @@
+<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 next previous element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/doc/inputotp/BasicDoc.vue b/doc/inputotp/BasicDoc.vue
new file mode 100644
index 000000000..ac72aad11
--- /dev/null
+++ b/doc/inputotp/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Two-way value binding is defined using <i>v-model</i>. The number of characters is defined with the <i>length</i> property, which is set to 4 by default.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-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-content-center">
+        <InputOtp v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/ImportDoc.vue b/doc/inputotp/ImportDoc.vue
new file mode 100644
index 000000000..6c589aa09
--- /dev/null
+++ b/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/doc/inputotp/IntegerOnlyDoc.vue b/doc/inputotp/IntegerOnlyDoc.vue
new file mode 100644
index 000000000..55a525e79
--- /dev/null
+++ b/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-content-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-content-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/MaskDoc.vue b/doc/inputotp/MaskDoc.vue
new file mode 100644
index 000000000..153ad36b4
--- /dev/null
+++ b/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-content-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-content-center">
+        <InputOtp v-model="value" mask />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" mask />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/pt/PTImage.vue b/doc/inputotp/pt/PTImage.vue
new file mode 100644
index 000000000..60ede1567
--- /dev/null
+++ b/doc/inputotp/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" />
+    </div>
+</template>
diff --git a/doc/inputotp/pt/index.vue b/doc/inputotp/pt/index.vue
new file mode 100644
index 000000000..584d9a293
--- /dev/null
+++ b/doc/inputotp/pt/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputSwitch Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inputswitch',
+                    label: 'InputSwitch PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputSwitch')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/theming/StyledDoc.vue b/doc/inputotp/theming/StyledDoc.vue
new file mode 100644
index 000000000..5df2ea33a
--- /dev/null
+++ b/doc/inputotp/theming/StyledDoc.vue
@@ -0,0 +1,29 @@
+<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-inputswitch</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-inputswitch-checked</td>
+                    <td>Container element in active state.</td>
+                </tr>
+                <tr>
+                    <td>p-inputswitch-slider</td>
+                    <td>Slider element behind the handle.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/inputotp/theming/TailwindDoc.vue b/doc/inputotp/theming/TailwindDoc.vue
new file mode 100644
index 000000000..fe4aadc26
--- /dev/null
+++ b/doc/inputotp/theming/TailwindDoc.vue
@@ -0,0 +1,6 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
+        Tailwind CSS.
+    </DocSectionText>
+</template>
diff --git a/doc/inputotp/theming/index.vue b/doc/inputotp/theming/index.vue
new file mode 100644
index 000000000..b9c44bb04
--- /dev/null
+++ b/doc/inputotp/theming/index.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputSwitch Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js
index 037a7c5ff..feca2c2d4 100644
--- a/modules/nuxt-primevue/runtime/core/components/index.js
+++ b/modules/nuxt-primevue/runtime/core/components/index.js
@@ -14,6 +14,7 @@ const form = [
     'InputIcon',
     'InputMask',
     'InputNumber',
+    'InputOtp',
     'InputSwitch',
     'InputText',
     'Knob',
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 60a8f403f..d7ca8ef78 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -56,6 +56,7 @@ const STYLE_ALIAS = {
     'primevue/inputicon/style': path.resolve(__dirname, './components/lib/inputicon/style/InputIconStyle.js'),
     'primevue/inputmask/style': path.resolve(__dirname, './components/lib/inputmask/style/InputMaskStyle.js'),
     'primevue/inputnumber/style': path.resolve(__dirname, './components/lib/inputnumber/style/InputNumberStyle.js'),
+    'primevue/inputotp/style': path.resolve(__dirname, './components/lib/inputotp/style/InputOtpStyle.js'),
     'primevue/inputswitch/style': path.resolve(__dirname, './components/lib/inputswitch/style/InputSwitchStyle.js'),
     'primevue/inputtext/style': path.resolve(__dirname, './components/lib/inputtext/style/InputTextStyle.js'),
     'primevue/knob/style': path.resolve(__dirname, './components/lib/knob/style/KnobStyle.js'),
diff --git a/pages/inputotp/index.vue b/pages/inputotp/index.vue
new file mode 100644
index 000000000..53fbc89d0
--- /dev/null
+++ b/pages/inputotp/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocComponent title="Vue Otp Input Component" header="InputOtp" description="Input Otp is used to enter one time passwords." :componentDocs="docs" :apiDocs="['InputOtp']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
+import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
+import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
+import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
+import PTComponent from '@/doc/inputotp/pt/index.vue';
+import ThemingDoc from '@/doc/inputotp/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'mask',
+                    label: 'Mask',
+                    component: MaskDoc
+                },
+                {
+                    id: 'integeronly',
+                    label: 'Integer Only',
+                    component: IntegerOnlyDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index a5223b08d..478404e6c 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 7278119d3..0377f8390 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index a853cb151..cc9da0f85 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index c2965363d..e239d10d1 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index 9de6b57cb..c25e3a03c 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index 08822ee98..9e925cef9 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index 22b7fa082..02e2231c0 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index f0399e3cb..b6fd391c8 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index 6ec354216..42892e700 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index 3e834d596..3df7cdc87 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index a4f41924f..63015b3ea 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index c95143f6f..df4b5fbe5 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 27935ca85..9e0c4daba 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index 117fd4225..ce1c3f1c5 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index ec09b0414..2a25b10c0 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index 1cd094f43..1c2463f99 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index ac0d3fb7e..68e9ce855 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index 9c894b6c0..1f3e32da1 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index bd07b09b8..56deed7de 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index 6784b63d4..5dca643a5 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index 08513f60c..b89da65bc 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index eca62a30b..5fefcea80 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index e25b41207..4ca9f3d5f 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index f124a432f..e536f67b2 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 301eb4d43..bc9ea3f17 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 37002f762..4824e6ba8 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 1aec877dd..79ff17a40 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index bae0b1032..a8c135d9d 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 91bdd9f4d..25d5e9798 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index e03e306df..ae61b1003 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index f11813d2e..6971ec8eb 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 4017009a4..9a76c1572 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 71c7d7fcf..a15eac126 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 81c2cdb31..4efb41778 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 225855982..6c9698607 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 17931a10b..a6d3b4ac4 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 06e92b5a8..8d412eb01 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index a1846e97b..1b63ab011 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index c52a4f27f..260b91ea5 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index dc8effe19..401171b41 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index ea86fe355..3a7ff7804 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index e5f43f652..c04048804 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 368f92929..4dbed3607 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 6c286fc42..eb8a548d3 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index aa41c8a34..4cd5361fb 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index de3ecc522..09a5349b6 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 0735e5f13..b8b7088e1 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 9ee1cbd98..841121837 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 777e905fa..2ae6354ae 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 9f27cbb8d..30bdb79c8 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 1bcb85c96..d6b368c5e 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 861bc1e01..bc3cd1599 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 3fb1973f9..84436237c 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 758377026..1fceb2c42 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 417f0dc30..d604ba8a1 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 93edb3402..e54eb882e 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 40f401831..f276a2532 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index c2fc9a9c1..a1c6571e1 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1741,6 +1741,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 5a83e774a..cd2e33434 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index fb46f2b65..617717826 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 52df4b159..d9f887b37 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 2702258af..c31fd3fae 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index ac967ff21..2d122c672 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 3b5dcffdf..6265f0868 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 3d845a2cf..dde35f753 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index fa8323357..304253c1d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 81befe107..736bf49ce 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index e1455fda4..f3f357bc4 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index bd6f3f749..13719c15d 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 9a99d7ae1..55e1ba567 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index e519c1538..d81372210 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1748,6 +1748,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index db3f3eef2..435a42566 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index fcb70c3c3..598a55ab5 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index dc53ece7f..2c79f2770 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index b9a12e9a2..3b9c3cb00 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 3828c6b76..0f7e5c47c 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1745,6 +1745,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 7aaa9dd71..be1fc9660 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1745,6 +1745,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/rollup.config.js b/rollup.config.js
index 38ddd8895..27fa6a2fd 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -117,6 +117,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/inputgroupaddon/style': 'primevue.inputgroupaddon.style',
     'primevue/inputmask/style': 'primevue.inputmask.style',
     'primevue/inputnumber/style': 'primevue.inputnumber.style',
+    'primevue/inputotp/style': 'primevue.inputotp.style',
     'primevue/inputswitch/style': 'primevue.inputswitch.style',
     'primevue/inputtext/style': 'primevue.inputtext.style',
     'primevue/knob/style': 'primevue.knob.style',

From 12551d32e42db345458053c50b0a533cbdf33640 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 22 Feb 2024 09:40:04 +0300
Subject: [PATCH 24/36] Description fixes

---
 doc/stepper/LinearDoc.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index 4ce828370..824c88b12 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Stepper consists of one or more StepperPanel elements.</p>
+        <p>Stepper is linear by default to enforce completion of a previus step to proceed, set <i>linear</i> as true for non-linear mode.</p>
     </DocSectionText>
     <div class="card" style="padding-left: 20rem; padding-right: 20rem">
-        <Stepper v-model:activeStep="active" linear>
+        <Stepper linear>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
                     <div class="flex flex-column h-12rem">
@@ -46,10 +46,9 @@
 export default {
     data() {
         return {
-            active: 0,
             code: {
                 basic: `
-<Stepper>
+<Stepper linear>
     <StepperPanel header="Header I">
         <template #content="{ prevCallback, nextCallback }">
             <div class="flex flex-column h-12rem">
@@ -88,7 +87,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Stepper>
+        <Stepper linear>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
                     <div class="flex flex-column h-12rem">
@@ -129,7 +128,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Stepper>
+        <Stepper linear>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
                     <div class="flex flex-column h-12rem">

From abfd15d07538fcd02fd6288d1fc4eb82b19f30e1 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 09:40:19 +0300
Subject: [PATCH 25/36] Add template sample to inputotp

---
 components/lib/inputotp/InputOtp.vue |  65 ++++++++------
 doc/inputotp/TemplateDoc.vue         | 124 +++++++++++++++++++++++++++
 pages/inputotp/index.vue             |   6 ++
 3 files changed, 169 insertions(+), 26 deletions(-)
 create mode 100644 doc/inputotp/TemplateDoc.vue

diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index 9522cb48d..21bdda87e 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -1,20 +1,21 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
-        <OtpInputText
-            v-for="i in length"
-            :key="i"
-            v-model="tokens[i - 1]"
-            :type="inputType"
-            :class="cx('input')"
-            maxlength="1"
-            :inputmode="inputMode"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-            @paste="onPaste"
-            @keydown="onKeyDown($event, i - 1)"
-            :pt="ptm('input')"
-        />
+        <template v-for="i in length" :key="i">
+            <slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)">
+                <OtpInputText
+                    :value="tokens[i - 1]"
+                    :type="inputType"
+                    :class="cx('input')"
+                    :inputmode="inputMode"
+                    @input="onInput($event, i - 1)"
+                    @focus="onFocus($event)"
+                    @blur="onBlur($event)"
+                    @paste="onPaste($event)"
+                    @keydown="onKeyDown($event)"
+                    :pt="ptm('input')"
+                />
+            </slot>
+        </template>
     </div>
 </template>
 
@@ -41,6 +42,20 @@ export default {
         }
     },
     methods: {
+        getTemplateAttrs(index) {
+            return {
+                value: this.tokens[index]
+            };
+        },
+        getTemplateEvents(index) {
+            return {
+                input: (event) => this.onInput(event, index),
+                keydown: (event) => this.onKeyDown(event),
+                focus: (event) => this.onFocus(event),
+                blur: (event) => this.onBlur(event),
+                paste: (event) => this.onPaste(event)
+            };
+        },
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
 
@@ -51,9 +66,15 @@ export default {
                 }
             });
         },
-        onInput(event) {
-            this.moveToNext(event);
+        onInput(event, index) {
+            this.tokens[index] = event.target.value;
             this.updateModel(event);
+
+            if (event.inputType === 'deleteContentBackward') {
+                this.moveToPrev(event);
+            } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
+                this.moveToNext(event);
+            }
         },
         updateModel(event) {
             const newValue = this.tokens.join('');
@@ -87,7 +108,7 @@ export default {
         onBlur(event) {
             this.$emit('blur', event);
         },
-        onKeyDown(event, index) {
+        onKeyDown(event) {
             const keyCode = event.keyCode;
 
             switch (keyCode) {
@@ -109,14 +130,6 @@ export default {
 
                     break;
 
-                case 8:
-                    event.preventDefault();
-                    this.tokens[index] = '';
-                    this.moveToPrev(event);
-                    this.updateModel(event);
-
-                    break;
-
                 default:
                     if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
                         event.preventDefault();
diff --git a/doc/inputotp/TemplateDoc.vue b/doc/inputotp/TemplateDoc.vue
new file mode 100644
index 000000000..2d201686d
--- /dev/null
+++ b/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-content-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-content-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(--surface-500);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--primary-color);
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-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(--surface-500);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--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(--surface-500);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--primary-color);
+}
+</style>
diff --git a/pages/inputotp/index.vue b/pages/inputotp/index.vue
index 53fbc89d0..6cb5376c0 100644
--- a/pages/inputotp/index.vue
+++ b/pages/inputotp/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
 import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
 import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
+import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
 import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
 import PTComponent from '@/doc/inputotp/pt/index.vue';
 import ThemingDoc from '@/doc/inputotp/theming/index.vue';
@@ -35,6 +36,11 @@ export default {
                     label: 'Integer Only',
                     component: IntegerOnlyDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',

From 87984b3e7b860d4c4e3496e6bb7f2259abad4204 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 10:17:13 +0300
Subject: [PATCH 26/36] Add sample ui for otp

---
 components/lib/inputotp/InputOtp.vue |  13 ++
 doc/inputotp/SampleDoc.vue           | 203 +++++++++++++++++++++++++++
 pages/inputotp/index.vue             |   6 +
 3 files changed, 222 insertions(+)
 create mode 100644 doc/inputotp/SampleDoc.vue

diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index 21bdda87e..6df198a45 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -124,6 +124,19 @@ export default {
 
                     break;
 
+                case 8:
+                    if (event.target.value.length === 0) {
+                        this.moveToPrev(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
                 case 39:
                     this.moveToNext(event);
                     event.preventDefault();
diff --git a/doc/inputotp/SampleDoc.vue b/doc/inputotp/SampleDoc.vue
new file mode 100644
index 000000000..6d8d0eba6
--- /dev/null
+++ b/doc/inputotp/SampleDoc.vue
@@ -0,0 +1,203 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A sample UI implementation with templating and additional elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+            <InputOtp v-model="value" :length="6" style="gap: 0">
+                <template #default="{ attrs, events }">
+                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+                </template>
+            </InputOtp>
+            <div class="flex justify-content-between mt-5 align-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-column align-items-center">
+    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+    <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+    <InputOtp v-model="value" :length="6" style="gap: 0">
+        <template #default="{ attrs, events }">
+            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+        </template>
+    </InputOtp>
+    <div class="flex justify-content-between mt-5 align-self-stretch">
+        <Button label="Resend Code" link class="p-0"></Button>
+        <Button label="Submit Code"></Button>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="flex flex-column align-items-center">
+        <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+        <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+        <InputOtp v-model="value" :length="6" style="gap: 0">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+        <div class="flex justify-content-between mt-5 align-self-stretch">
+            <Button label="Resend Code" link class="p-0"></Button>
+            <Button label="Submit Code"></Button>
+        </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(--surface-400);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--text-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--primary-color);
+}
+
+.custom-otp-input:first-child {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="flex flex-column align-items-center">
+        <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+        <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+        <InputOtp v-model="value" :length="6" style="gap: 0">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+        <div class="flex justify-content-between mt-5 align-self-stretch">
+            <Button label="Resend Code" link class="p-0"></Button>
+            <Button label="Submit Code"></Button>
+        </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(--surface-400);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--text-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--primary-color);
+}
+
+.custom-otp-input:first-child {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+<\/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(--surface-400);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--text-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--primary-color);
+}
+
+.custom-otp-input:first-child {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+</style>
diff --git a/pages/inputotp/index.vue b/pages/inputotp/index.vue
index 6cb5376c0..1f2c2e900 100644
--- a/pages/inputotp/index.vue
+++ b/pages/inputotp/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
 import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
 import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
+import SampleDoc from '@/doc/inputotp/SampleDoc.vue';
 import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
 import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
 import PTComponent from '@/doc/inputotp/pt/index.vue';
@@ -41,6 +42,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'sample',
+                    label: 'Sample',
+                    component: SampleDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',

From 6302f400d0a3ce033b167a87a232b511e7350a1c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 10:42:48 +0300
Subject: [PATCH 27/36] Updated sample ui for otp

---
 components/lib/inputotp/InputOtp.vue | 33 ++++++++----
 doc/inputotp/SampleDoc.vue           | 79 ++++++++++++++++++----------
 2 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index 6df198a45..bb6a7ed1a 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -1,12 +1,17 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
         <template v-for="i in length" :key="i">
-            <slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)">
+            <slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)" :index="i">
                 <OtpInputText
                     :value="tokens[i - 1]"
                     :type="inputType"
                     :class="cx('input')"
                     :inputmode="inputMode"
+                    :variant="variant"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :invalid="invalid"
+                    :tabindex="tabindex"
                     @input="onInput($event, i - 1)"
                     @focus="onFocus($event)"
                     @blur="onBlur($event)"
@@ -86,21 +91,31 @@ export default {
             });
         },
         moveToPrev(event) {
-            var prevElement = event.target.previousElementSibling;
+            var prevInput = this.findPrevInput(event.target);
 
-            if (prevElement) {
-                prevElement.focus();
-                prevElement.select();
+            if (prevInput) {
+                prevInput.focus();
+                prevInput.select();
             }
         },
         moveToNext(event) {
-            var nextElement = event.target.nextElementSibling;
+            var nextInput = this.findNextInput(event.target);
 
-            if (nextElement) {
-                nextElement.focus();
-                nextElement.select();
+            if (nextInput) {
+                nextInput.focus();
+                nextInput.select();
             }
         },
+        findNextInput(element) {
+            var nextElement = element.nextElementSibling;
+
+            return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
+        },
+        findPrevInput(element) {
+            var prevElement = element.previousElementSibling;
+
+            return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
+        },
         onFocus(event) {
             event.target.select();
             this.$emit('focus', event);
diff --git a/doc/inputotp/SampleDoc.vue b/doc/inputotp/SampleDoc.vue
index 6d8d0eba6..e021bf824 100644
--- a/doc/inputotp/SampleDoc.vue
+++ b/doc/inputotp/SampleDoc.vue
@@ -7,8 +7,11 @@
             <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
             <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
             <InputOtp v-model="value" :length="6" style="gap: 0">
-                <template #default="{ attrs, events }">
+                <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-3">
+                        <i class="pi pi-minus" />
+                    </div>
                 </template>
             </InputOtp>
             <div class="flex justify-content-between mt-5 align-self-stretch">
@@ -31,8 +34,11 @@ export default {
     <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
     <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
     <InputOtp v-model="value" :length="6" style="gap: 0">
-        <template #default="{ attrs, events }">
+        <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-3">
+                <i class="pi pi-minus" />
+            </div>
         </template>
     </InputOtp>
     <div class="flex justify-content-between mt-5 align-self-stretch">
@@ -43,17 +49,22 @@ export default {
 `,
                 options: `
 <template>
-    <div class="flex flex-column align-items-center">
-        <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-        <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
-        <InputOtp v-model="value" :length="6" style="gap: 0">
-            <template #default="{ attrs, events }">
-                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            </template>
-        </InputOtp>
-        <div class="flex justify-content-between mt-5 align-self-stretch">
-            <Button label="Resend Code" link class="p-0"></Button>
-            <Button label="Submit Code"></Button>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-color-secondary block mb-5">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-3">
+                        <i class="pi pi-minus" />
+                    </div>
+                </template>
+            </InputOtp>
+            <div class="flex justify-content-between mt-5 align-self-stretch">
+                <Button label="Resend Code" link class="p-0"></Button>
+                <Button label="Submit Code"></Button>
+            </div>
         </div>
     </div>
 </template>
@@ -90,32 +101,40 @@ export default {
     outline: 2px solid var(--primary-color);
 }
 
-.custom-otp-input:first-child {
+.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(--surface-400);
 }
 <\/style>
 `,
                 composition: `
 <template>
-    <div class="flex flex-column align-items-center">
-        <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
-        <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
-        <InputOtp v-model="value" :length="6" style="gap: 0">
-            <template #default="{ attrs, events }">
-                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
-            </template>
-        </InputOtp>
-        <div class="flex justify-content-between mt-5 align-self-stretch">
-            <Button label="Resend Code" link class="p-0"></Button>
-            <Button label="Submit Code"></Button>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-color-secondary block mb-5">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-3">
+                        <i class="pi pi-minus" />
+                    </div>
+                </template>
+            </InputOtp>
+            <div class="flex justify-content-between mt-5 align-self-stretch">
+                <Button label="Resend Code" link class="p-0"></Button>
+                <Button label="Submit Code"></Button>
+            </div>
         </div>
     </div>
 </template>
@@ -148,16 +167,19 @@ const value = ref(null);
     outline: 2px solid var(--primary-color);
 }
 
-.custom-otp-input:first-child {
+.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(--surface-400);
 }
 <\/style>
 `
@@ -189,15 +211,18 @@ const value = ref(null);
     outline: 2px solid var(--primary-color);
 }
 
-.custom-otp-input:first-child {
+.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(--surface-400);
 }
 </style>

From 28f7085cc9978e4eae6cfd2254bef90228381824 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 11:28:34 +0300
Subject: [PATCH 28/36] Update intro page

---
 doc/setup/GuidesDoc.vue | 147 +++++++++++++++++++++++++++++++---------
 1 file changed, 116 insertions(+), 31 deletions(-)

diff --git a/doc/setup/GuidesDoc.vue b/doc/setup/GuidesDoc.vue
index fa4cbd3fa..6b1d4c22c 100644
--- a/doc/setup/GuidesDoc.vue
+++ b/doc/setup/GuidesDoc.vue
@@ -1,39 +1,122 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
-    <div class="flex gap-4">
-        <div class="card">
-            <NuxtLink to="/vite">
-                <span class="images">
-                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite.svg" />
-                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite-2.svg" class="original" />
-                </span>
-                <span class="title">VITE</span>
-            </NuxtLink>
+    <div class="grid">
+        <div class="col-12 sm:col-4">
+            <div class="card">
+                <NuxtLink to="/vite">
+                    <span class="images">
+                        <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g id="vite" clip-path="url(#clip0_3_57)">
+                                <path
+                                    id="Vector"
+                                    d="M32.0549 12.9123L32.0549 12.9123L59.3263 7.86786C60.152 7.71512 60.8175 8.61497 60.3885 9.39371C60.3885 9.39372 60.3885 9.39373 60.3885 9.39375L32.5644 59.887C32.1791 60.5862 31.1958 60.5902 30.8048 59.8945C30.8048 59.8945 30.8048 59.8945 30.8047 59.8945L2.42899 9.39495C1.99227 8.61774 2.655 7.71063 3.48355 7.86092C3.48355 7.86092 3.48355 7.86092 3.48355 7.86092L31.3374 12.9136L31.4267 12.4216L31.3374 12.9136C31.5747 12.9566 31.8176 12.9562 32.0549 12.9123Z"
+                                    stroke="var(--text-color-secondary)"
+                                />
+                                <path
+                                    id="Vector_2"
+                                    d="M24.2017 5.3266L24.2017 5.3266C24.0911 5.34859 24.0014 5.44626 23.9939 5.57298L24.2017 5.3266ZM24.2017 5.3266L44.7924 1.23202C44.9675 1.19721 45.1441 1.36539 45.0858 1.57068L41.2344 15.1203C40.9796 16.0167 41.7473 16.8966 42.6812 16.7138L42.6813 16.7138L48.5822 15.558C48.775 15.5203 48.9623 15.7301 48.8571 15.9431L48.8571 15.9432L32.0907 49.9002L31.8017 50.3534L31.8017 50.3535C31.7534 50.4293 31.7021 50.4571 31.6608 50.4683C31.6134 50.4813 31.5538 50.4788 31.4938 50.4538C31.4338 50.4288 31.3876 50.3873 31.3609 50.341C31.3371 50.2998 31.3197 50.24 31.3381 50.1499L31.3381 50.1499L34.0448 36.8548C34.2339 35.9264 33.3724 35.1027 32.4474 35.3876L32.4472 35.3877L28.9065 36.4794C28.7341 36.5325 28.5407 36.38 28.5834 36.1681L30.2866 27.7041C30.2866 27.704 30.2866 27.704 30.2866 27.704C30.4661 26.8122 29.6748 26.0058 28.7717 26.2172L28.7716 26.2172L23.0389 27.5599C23.0389 27.5599 23.0389 27.5599 23.0389 27.5599C22.8827 27.5964 22.7164 27.4709 22.7273 27.2827C22.7273 27.2827 22.7273 27.2827 22.7273 27.2827L23.9939 5.57303L24.2017 5.3266Z"
+                                    stroke="var(--text-color-secondary)"
+                                />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_3_57">
+                                    <rect width="62" height="62" fill="white" transform="translate(0.392822 0.5)" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                        <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
+                            <g id="vite" clip-path="url(#clip0_1_67)">
+                                <path
+                                    id="Vector"
+                                    d="M60.8263 9.63502L33.0022 60.1283C32.4278 61.1707 30.9519 61.1769 30.3688 60.1395L1.99297 9.63989C1.35772 8.50935 2.3103 7.13997 3.57267 7.36895L31.4265 12.4216C31.6042 12.4538 31.7861 12.4535 31.9638 12.4207L59.2352 7.3762C60.4933 7.14348 61.4504 8.50226 60.8263 9.63502Z"
+                                    fill="url(#paint0_linear_1_67)"
+                                />
+                                <path
+                                    id="Vector_2"
+                                    d="M44.6949 0.741624L24.1042 4.8362C23.7658 4.9035 23.5152 5.19456 23.4948 5.54386L22.2282 27.2536C22.1984 27.765 22.6611 28.1618 23.1529 28.0467L28.8856 26.7041C29.422 26.5785 29.9066 27.058 29.7964 27.6054L28.0932 36.0694C27.9786 36.6391 28.5056 37.1262 29.0538 36.9572L32.5946 35.8655C33.1435 35.6964 33.671 36.1848 33.5548 36.755L30.8481 50.0501C30.6788 50.8818 31.7688 51.3353 32.2233 50.6222L32.527 50.146L49.3054 16.1645C49.5864 15.5956 49.1018 14.9468 48.4861 15.0674L42.5852 16.2231C42.0307 16.3316 41.5589 15.8076 41.7154 15.257L45.5668 1.7073C45.7234 1.15579 45.25 0.631249 44.6949 0.741624Z"
+                                    fill="url(#paint1_linear_1_67)"
+                                />
+                            </g>
+                            <defs>
+                                <linearGradient id="paint0_linear_1_67" x1="1.30015" y1="5.5644" x2="36.5943" y2="52.7953" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#41D1FF" />
+                                    <stop offset="1" stop-color="#BD34FE" />
+                                </linearGradient>
+                                <linearGradient id="paint1_linear_1_67" x1="29.8279" y1="1.85329" x2="36.2756" y2="45.4365" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#FFEA83" />
+                                    <stop offset="0.0833333" stop-color="#FFDD35" />
+                                    <stop offset="1" stop-color="#FFA800" />
+                                </linearGradient>
+                                <clipPath id="clip0_1_67">
+                                    <rect width="62" height="62" fill="white" transform="translate(0.392822 0.5)" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                    </span>
+                    <span class="title">VITE</span>
+                </NuxtLink>
+            </div>
         </div>
-        <div class="card">
-            <NuxtLink to="/nuxt">
-                <span class="images">
-                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt.svg" />
-                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt-2.svg" class="original" />
-                </span>
-                <span class="title">NUXT</span>
-            </NuxtLink>
+        <div class="col-12 sm:col-4">
+            <div class="card">
+                <NuxtLink to="/nuxt">
+                    <span class="images">
+                        <svg width="95" height="63" viewBox="0 0 95 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M52.9726 62.5H87.3826C88.4807 62.5001 89.5316 62.1142 90.4826 61.57C91.4335 61.0258 92.4138 60.3426 92.9626 59.4C93.5114 58.4574 93.8931 57.388 93.8926 56.2997C93.8921 55.2114 93.5122 54.1424 92.9626 53.2002L69.7126 13.21C69.1638 12.2676 68.4933 11.5841 67.5426 11.04C66.5918 10.4959 65.2305 10.11 64.1326 10.11C63.0347 10.11 61.9833 10.4959 61.0326 11.04C60.0818 11.5841 59.4114 12.2676 58.8626 13.21L52.9726 23.44L41.1926 3.59927C40.6433 2.65693 39.9736 1.66402 39.0226 1.12C38.0716 0.575977 37.0206 0.5 35.9226 0.5C34.8245 0.5 33.7736 0.575977 32.8226 1.12C31.8716 1.66402 30.8918 2.65693 30.3426 3.59927L1.51258 53.2002C0.962942 54.1424 0.893056 55.2114 0.892579 56.2997C0.892101 57.388 0.963769 58.4572 1.51258 59.3999C2.06139 60.3425 3.04164 61.0258 3.99258 61.57C4.94352 62.1142 5.99449 62.5001 7.09258 62.5H28.7926C37.3909 62.5 43.6494 58.6429 48.0126 51.34L58.5526 33.05L64.1326 23.44L81.1826 52.58H58.5526L52.9726 62.5ZM28.4826 52.58H13.2926L35.9226 13.52L47.3926 33.05L39.7949 46.2947C36.8973 51.0331 33.5938 52.58 28.4826 52.58Z"
+                                stroke="var(--text-color-secondary)"
+                            />
+                        </svg>
+                        <svg width="94" height="63" viewBox="0 0 94 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
+                            <g id="nuxt">
+                                <path
+                                    id="Triangles"
+                                    d="M52.9728 62.5H87.3828C88.4809 62.5001 89.5319 62.1142 90.4828 61.57C91.4338 61.0258 92.414 60.3426 92.9628 59.4C93.5116 58.4574 93.8933 57.388 93.8928 56.2997C93.8923 55.2114 93.5125 54.1424 92.9628 53.2002L69.7128 13.21C69.164 12.2676 68.4936 11.5841 67.5428 11.04C66.5921 10.4959 65.2307 10.11 64.1328 10.11C63.035 10.11 61.9836 10.4959 61.0328 11.04C60.0821 11.5841 59.4116 12.2676 58.8628 13.21L52.9728 23.44L41.1928 3.59927C40.6436 2.65693 39.9738 1.66402 39.0228 1.12C38.0718 0.575977 37.0209 0.5 35.9228 0.5C34.8248 0.5 33.7738 0.575977 32.8228 1.12C31.8718 1.66402 30.8921 2.65693 30.3428 3.59927L1.51282 53.2002C0.963186 54.1424 0.893301 55.2114 0.892823 56.2997C0.892345 57.388 0.964013 58.4572 1.51282 59.3999C2.06163 60.3425 3.04188 61.0258 3.99282 61.57C4.94376 62.1142 5.99473 62.5001 7.09282 62.5H28.7928C37.3912 62.5 43.6496 58.6429 48.0128 51.34L58.5528 33.05L64.1328 23.44L81.1828 52.58H58.5528L52.9728 62.5ZM28.4828 52.58H13.2928L35.9228 13.52L47.3928 33.05L39.7951 46.2947C36.8976 51.0331 33.594 52.58 28.4828 52.58Z"
+                                    fill="#00DC82"
+                                />
+                            </g>
+                        </svg>
+                    </span>
+                    <span class="title">NUXT</span>
+                </NuxtLink>
+            </div>
         </div>
-        <div class="card">
-            <NuxtLink to="/cdn">
-                <span class="images">
-                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/html.svg" />
-                    <img src="https://primefaces.org/cdn/primevue/images/logos/installation/html-2.svg" class="original" />
-                </span>
-                <span class="title">CDN</span>
-            </NuxtLink>
+        <div class="col-12 sm:col-4">
+            <div class="card flex-1">
+                <NuxtLink to="/cdn">
+                    <span class="images">
+                        <svg width="55" height="60" viewBox="0 0 55 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M0.59082 0.0688477H54.3064L49.3794 53.166L27.1685 59.2714L5.51761 53.6348L0.59082 0.0688477ZM1.68702 1.06885L6.44909 52.844L27.1614 58.2362L48.4475 52.3851L53.2093 1.06885H1.68702ZM9.62573 10.0733H45.1308L44.3146 17.6229H18.3298L18.8344 23.5266H43.8817L41.9722 44.7773L27.4625 48.6181L12.8914 44.7772L11.9306 33.4396H19.7175L20.1987 38.7929L27.4612 40.6224L34.6048 38.795L35.2392 31.0762H11.5463L9.62573 10.0733ZM10.7213 11.0733L12.4591 30.0762H36.3248L35.5431 39.5872L27.4631 41.6541L19.2662 39.5892L18.8033 34.4396H13.0189L13.8283 43.99L27.4619 47.5838L41.0389 43.9899L42.7878 24.5266H17.9162L17.2407 16.6229H43.4169L44.0169 11.0733H10.7213Z"
+                                fill="var(--text-color-secondary)"
+                            />
+                        </svg>
+                        <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
+                            <g id="Frame" clip-path="url(#clip0_3_69)">
+                                <path id="Vector" d="M8.91734 54.595L3.99609 0.5H58.8661L53.8286 54.5562L31.3536 60.5625" fill="#E44D26" />
+                                <path id="Vector_2" d="M31.3926 55.9512V4.91748H53.8288L49.5663 51.0687" fill="#F16529" />
+                                <path id="Vector_3" d="M14.1489 11.5437H31.3927V18.17H21.7052L22.3252 24.9512H31.3927V31.5775H16.0089L14.1489 11.5437ZM16.3189 34.91H23.2552L23.7589 40.2187L31.4314 42.1562V49.1312L17.3264 45.3337" fill="#EBEBEB" />
+                                <path id="Vector_4" d="M48.559 11.5437H31.3928V18.17H47.9778L48.5978 11.5825L48.559 11.5437ZM47.319 24.9512H31.354V31.5775H39.8403L39.0265 40.2187L31.354 42.1562V49.0925L45.4203 45.3337" fill="white" />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_3_69">
+                                    <rect width="62" height="62" fill="white" transform="translate(0.392578 0.5)" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                    </span>
+                    <span class="title">CDN</span>
+                </NuxtLink>
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
 .card {
-    min-width: 15rem;
+    padding: 0;
     min-height: 15rem;
     display: flex;
     align-items: center;
@@ -46,6 +129,8 @@
     justify-content: center;
     flex-direction: column;
     gap: 1rem;
+    width: 100%;
+    height: 100%;
 }
 
 .card .title {
@@ -62,26 +147,26 @@
     align-items: center;
 }
 
-.card img {
+.card svg {
     height: 62px;
     opacity: 1;
     transition: all 0.5s;
 }
 
-.card img.original {
+.card svg.original {
     opacity: 0;
     margin-top: -62px;
 }
 
-.card a:hover img {
+.card:hover svg {
     opacity: 0;
 }
 
-.card a:hover img.original {
+.card:hover svg.original {
     opacity: 1;
 }
 
-.card a:hover .title {
+.card:hover .title {
     color: var(--text-color);
 }
 </style>

From c6c10fc4fa9a7b2ad65759e5776b8a1c89578747 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 22 Feb 2024 11:45:40 +0300
Subject: [PATCH 29/36] Update InputSwitch.d.ts

---
 components/lib/inputswitch/InputSwitch.d.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/components/lib/inputswitch/InputSwitch.d.ts b/components/lib/inputswitch/InputSwitch.d.ts
index b0f1b64fc..c6791e150 100755
--- a/components/lib/inputswitch/InputSwitch.d.ts
+++ b/components/lib/inputswitch/InputSwitch.d.ts
@@ -25,10 +25,6 @@ export interface InputSwitchPassThroughMethodOptions {
      * Defines valid properties.
      */
     props: InputSwitchProps;
-    /**
-     * Defines current inline state.
-     */
-    state: InputSwitchState;
     /**
      * Defines current options.
      */
@@ -78,13 +74,6 @@ export interface InputSwitchPassThroughAttributes {
     [key: string]: any;
 }
 
-/**
- * Defines current inline state in InputSwitch component.
- */
-export interface InputSwitchState {
-    [key: string]: any;
-}
-
 /**
  * Defines valid properties in InputSwitch component.
  */

From 2d232f93bb7bff123b4cc21c497c7e0c6b9e5cb9 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 22 Feb 2024 11:52:39 +0300
Subject: [PATCH 30/36] InputOtp documentation

---
 api-generator/components/inputotp.js          |  16 +-
 components/doc/codeeditor/templates.js        |   6 +-
 components/lib/inputotp/InputOtp.d.ts         | 212 +++++++++++-------
 components/lib/inputotp/InputOtp.vue          |   1 +
 .../lib/inputotp/style/InputOtpStyle.js       |   2 +-
 doc/inputotp/pt/PTImage.vue                   |   2 +-
 doc/inputotp/pt/index.vue                     |   8 +-
 doc/inputotp/theming/StyledDoc.vue            |  10 +-
 8 files changed, 152 insertions(+), 105 deletions(-)

diff --git a/api-generator/components/inputotp.js b/api-generator/components/inputotp.js
index c4a86f705..6c74db25d 100644
--- a/api-generator/components/inputotp.js
+++ b/api-generator/components/inputotp.js
@@ -1,9 +1,9 @@
-const InputSwitchProps = [
+const InputOtpProps = [
     {
         name: 'modelValue',
         type: 'boolean',
         default: 'null',
-        description: 'Specifies whether a inputswitch should be checked or not.'
+        description: 'Specifies whether a inputOtp should be checked or not.'
     },
     {
         name: 'trueValue',
@@ -55,7 +55,7 @@ const InputSwitchProps = [
     }
 ];
 
-const InputSwitchEvents = [
+const InputOtpEvents = [
     {
         name: 'click',
         description: 'Callback to invoke on click.'
@@ -71,10 +71,10 @@ const InputSwitchEvents = [
 ];
 
 module.exports = {
-    inputswitch: {
-        name: 'InputSwitch',
-        description: 'InputSwitch is used to select a boolean value.',
-        props: InputSwitchProps,
-        events: InputSwitchEvents
+    inputotp: {
+        name: 'InputOtp',
+        description: 'InputOtp  is used to enter one time passwords.',
+        props: InputOtpProps,
+        events: InputOtpEvents
     }
 };
diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index 6baa7dec7..1441d3356 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -193,10 +193,11 @@ import InlineMessage from 'primevue/inlinemessage';
 import Inplace from 'primevue/inplace';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
-import InputSwitch from 'primevue/inputswitch';
-import InputText from 'primevue/inputtext';
 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';
@@ -313,6 +314,7 @@ 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);
diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts
index 83506dbf9..892c9bcbd 100755
--- a/components/lib/inputotp/InputOtp.d.ts
+++ b/components/lib/inputotp/InputOtp.d.ts
@@ -1,22 +1,24 @@
 /**
  *
- * InputSwitch is used to select a boolean value.
+ * InputOtp is used to enter one time passwords.
  *
- * [Live Demo](https://www.primevue.org/inputswitch/)
+ * [Live Demo](https://www.primevue.org/inputotp/)
  *
  * @module inputotp
  *
  */
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent/BaseComponent';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
+export declare type InputOtpPassThroughOptionType = InputOtpPassThroughAttributes | ((options: InputOtpPassThroughMethodOptions) => InputOtpPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface InputSwitchPassThroughMethodOptions {
+export interface InputOtpPassThroughMethodOptions {
     /**
      * Defines instance.
      */
@@ -24,23 +26,15 @@ export interface InputSwitchPassThroughMethodOptions {
     /**
      * Defines valid properties.
      */
-    props: InputSwitchProps;
+    props: InputOtpProps;
     /**
      * Defines current inline state.
      */
-    state: InputSwitchState;
-    /**
-     * Defines current options.
-     */
-    context: InputSwitchContext;
+    state: InputOtpState;
     /**
      * Defines valid attributes.
      */
     attrs: any;
-    /**
-     * Defines parent options.
-     */
-    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -48,22 +42,33 @@ export interface InputSwitchPassThroughMethodOptions {
 }
 
 /**
- * Custom passthrough(pt) options.
- * @see {@link InputSwitchProps.pt}
+ * Custom shared passthrough(pt) option method.
  */
-export interface InputSwitchPassThroughOptions {
+export interface InputOtpSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: InputOtpProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InputOtpState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputOtpProps.pt}
+ */
+export interface InputOtpPassThroughOptions {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: InputSwitchPassThroughOptionType;
+    root?: InputOtpPassThroughOptionType;
     /**
-     * Used to pass attributes to the input's DOM element.
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputSwitchPassThroughOptionType;
-    /**
-     * Used to pass attributes to the slider's DOM element.
-     */
-    slider?: InputSwitchPassThroughOptionType;
+    input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -74,36 +79,70 @@ export interface InputSwitchPassThroughOptions {
 /**
  * Custom passthrough attributes for each DOM elements
  */
-export interface InputSwitchPassThroughAttributes {
+export interface InputOtpPassThroughAttributes {
     [key: string]: any;
 }
 
 /**
- * Defines current inline state in InputSwitch component.
+ * Defines current inline state in InputOtp component.
  */
-export interface InputSwitchState {
-    [key: string]: any;
-}
-
-/**
- * Defines valid properties in InputSwitch component.
- */
-export interface InputSwitchProps {
+export interface InputOtpState {
     /**
-     * Specifies whether a inputswitch should be checked or not.
+     * Array of input tokens
+     */
+    tokens: string[] | number[];
+}
+
+/**
+ * InputOtp attr options
+ */
+export interface InputOtpTemplateAttrsOptions {
+    /**
+     * Input token value
+     */
+    value: string;
+}
+
+/**
+ * InputOtp templating events
+ */
+export interface InputOtpTemplateEvents {
+    /**
+     * Input event
+     * @param {Event} event - Browser event
+     */
+    input: (event: Event) => void;
+    /**
+     * Keydown event
+     * @param {Event} event - Browser event
+     */
+    keydown: (event: Event) => void;
+    /**
+     * Focus event
+     * @param {Event} event - Browser event
+     */
+    focus: (event: Event) => void;
+    /**
+     * Blur event
+     * @param {Event} event - Browser event
+     */
+    blur: (event: Event) => void;
+    /**
+     * Paste event
+     * @param {Event} event - Browser event
+     */
+    paste: (event: Event) => void;
+}
+
+/**
+ * Defines valid properties in InputOtp component.
+ */
+export interface InputOtpProps {
+    /**
+     * Specifies whether a inputotp should be checked or not.
      * @defaultValue false
      */
     modelValue?: boolean | string | undefined;
-    /**
-     * Value in checked state.
-     * @defaultValue true
-     */
-    trueValue?: any;
-    /**
-     * Value in unchecked state.
-     * @defaultValue false
-     */
-    falseValue?: any;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -116,38 +155,38 @@ export interface InputSwitchProps {
     disabled?: boolean | undefined;
     /**
      * When present, it specifies that an input field is read-only.
-     * @default false
+     * @defaultValue false
      */
     readonly?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Index of the element in tabbing order.
      */
     tabindex?: number | undefined;
     /**
-     * 	Identifier of the underlying input element.
+     * Number of characters to initiate.
+     * @defaultValue 4
      */
-    inputId?: string | undefined;
+    length?: number | undefined;
     /**
-     * Style class of the input field.
+     * Mask pattern.
+     * @defaultValue false
      */
-    inputClass?: string | object | undefined;
+    mask?: boolean | undefined;
     /**
-     * Inline style of the input field.
+     * When present, it specifies that an input field is integer-only.
+     * @defaultValue false
      */
-    inputStyle?: object | undefined;
-    /**
-     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
-     */
-    ariaLabelledby?: string | undefined;
-    /**
-     * Establishes a string value that labels the component.
-     */
-    ariaLabel?: string | undefined;
+    integerOnly?: boolean | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
-     * @type {InputSwitchPassThroughOptions}
+     * @type {InputOtpPassThroughOptions}
      */
-    pt?: PassThrough<InputSwitchPassThroughOptions>;
+    pt?: PassThrough<InputOtpPassThroughOptions>;
     /**
      * Used to configure passthrough(pt) options of the component.
      * @type {PassThroughOptions}
@@ -161,27 +200,36 @@ export interface InputSwitchProps {
 }
 
 /**
- * Defines current options in InputSwitch component.
+ *
  */
-export interface InputSwitchContext {
+export interface InputOtpSlots {
     /**
-     * Current checked state of the item as a boolean.
-     * @defaultValue false
+     * Default content slot.
      */
-    checked: boolean;
-    /**
-     * Current disabled state of the item as a boolean.
-     * @defaultValue false
-     */
-    disabled: boolean;
+    default(scope: {
+        /**
+         * Events of the component
+         * @param {number} index - Index of the input field
+         * @return {InputOtpTemplateEvents}
+         */
+        events: (index: number) => InputOtpTemplateEvents;
+        /**
+         * Attributes of the component
+         * @param {number} index - Index of the input field
+         * @return {InputOtpTemplateAttrsOptions}
+         */
+        attrs: (index: number) => InputOtpTemplateAttrsOptions;
+        /**
+         * Index of the input field
+         */
+        index: number;
+    }): VNode[];
 }
 
-export interface InputSwitchSlots {}
-
 /**
- * Defines valid emits in InputSwitch component.
+ * Defines valid emits in InputOtp component.
  */
-export interface InputSwitchEmits {
+export interface InputOtpEmits {
     /**
      * Emitted when the value changes.
      * @param {boolean} value - New value.
@@ -205,23 +253,23 @@ export interface InputSwitchEmits {
 }
 
 /**
- * **PrimeVue - InputSwitch**
+ * **PrimeVue - InputOtp**
  *
- * _InputSwitch is used to select a boolean value._
+ * _InputOtp  is used to enter one time passwords._
  *
- * [Live Demo](https://www.primevue.org/inputswitch/)
+ * [Live Demo](https://www.primevue.org/inputotp/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
  * @group Component
  *
  */
-declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {}
+declare class InputOtp extends ClassComponent<InputOtpProps, InputOtpSlots, InputOtpEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        InputSwitch: GlobalComponentConstructor<InputSwitch>;
+        InputOtp: GlobalComponentConstructor<InputOtp>;
     }
 }
 
-export default InputSwitch;
+export default InputOtp;
diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index bb6a7ed1a..d72d356ef 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -12,6 +12,7 @@
                     :disabled="disabled"
                     :invalid="invalid"
                     :tabindex="tabindex"
+                    :unstyled="unstyled"
                     @input="onInput($event, i - 1)"
                     @focus="onFocus($event)"
                     @blur="onBlur($event)"
diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js
index f1a9db114..89b47d4fe 100644
--- a/components/lib/inputotp/style/InputOtpStyle.js
+++ b/components/lib/inputotp/style/InputOtpStyle.js
@@ -1,7 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props }) => ['p-inputotp p-component'],
+    root: 'p-inputotp p-component',
     input: 'p-inputotp-input'
 };
 
diff --git a/doc/inputotp/pt/PTImage.vue b/doc/inputotp/pt/PTImage.vue
index 60ede1567..9ac50d6b4 100644
--- a/doc/inputotp/pt/PTImage.vue
+++ b/doc/inputotp/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
     </div>
 </template>
diff --git a/doc/inputotp/pt/index.vue b/doc/inputotp/pt/index.vue
index 584d9a293..797c4ac77 100644
--- a/doc/inputotp/pt/index.vue
+++ b/doc/inputotp/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>InputSwitch Pass Through</h1>
+            <h1>InputOtp Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc.inputswitch',
-                    label: 'InputSwitch PT Options',
+                    id: 'pt.doc.inputotp',
+                    label: 'InputOtp PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputSwitch')
+                    data: getPTOption('InputOtp')
                 }
             ]
         };
diff --git a/doc/inputotp/theming/StyledDoc.vue b/doc/inputotp/theming/StyledDoc.vue
index 5df2ea33a..25be573db 100644
--- a/doc/inputotp/theming/StyledDoc.vue
+++ b/doc/inputotp/theming/StyledDoc.vue
@@ -12,16 +12,12 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-inputswitch</td>
+                    <td>p-inputotp</td>
                     <td>Container element.</td>
                 </tr>
                 <tr>
-                    <td>p-inputswitch-checked</td>
-                    <td>Container element in active state.</td>
-                </tr>
-                <tr>
-                    <td>p-inputswitch-slider</td>
-                    <td>Slider element behind the handle.</td>
+                    <td>p-inputotp-input</td>
+                    <td>Input element of the component.</td>
                 </tr>
             </tbody>
         </table>

From d05395dc54cdba74bd5155f97c982fe69f91f21c Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 22 Feb 2024 08:53:40 +0000
Subject: [PATCH 31/36] Update API doc

---
 doc/common/apidoc/index.json | 280 ++++++++++++++++++-----------------
 1 file changed, 142 insertions(+), 138 deletions(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 1257694f1..4aa69edc4 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -31975,10 +31975,10 @@
         }
     },
     "inputotp": {
-        "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
+        "description": "InputOtp is used to enter one time passwords.\n\n[Live Demo](https://www.primevue.org/inputotp/)",
         "components": {
             "default": {
-                "description": "InputSwitch is used to select a boolean value.",
+                "description": "InputOtp  is used to enter one time passwords.",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -31991,7 +31991,7 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
-                "InputSwitchPassThroughMethodOptions": {
+                "InputOtpPassThroughMethodOptions": {
                     "description": "Custom passthrough(pt) option method.",
                     "relatedProp": "",
                     "props": [
@@ -32007,7 +32007,7 @@
                             "name": "props",
                             "optional": false,
                             "readonly": false,
-                            "type": "InputSwitchProps",
+                            "type": "InputOtpProps",
                             "default": "",
                             "description": "Defines valid properties."
                         },
@@ -32015,18 +32015,10 @@
                             "name": "state",
                             "optional": false,
                             "readonly": false,
-                            "type": "InputSwitchState",
+                            "type": "InputOtpState",
                             "default": "",
                             "description": "Defines current inline state."
                         },
-                        {
-                            "name": "context",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "InputSwitchContext",
-                            "default": "",
-                            "description": "Defines current options."
-                        },
                         {
                             "name": "attrs",
                             "optional": false,
@@ -32035,14 +32027,6 @@
                             "default": "",
                             "description": "Defines valid attributes."
                         },
-                        {
-                            "name": "parent",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any",
-                            "default": "",
-                            "description": "Defines parent options."
-                        },
                         {
                             "name": "global",
                             "optional": false,
@@ -32054,15 +32038,38 @@
                     ],
                     "methods": []
                 },
-                "InputSwitchPassThroughOptions": {
+                "InputOtpSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
-                    "relatedProp": "InputSwitchProps.pt",
+                    "relatedProp": "InputOtpProps.pt",
                     "props": [
                         {
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputSwitchPassThroughOptionType",
+                            "type": "InputOtpPassThroughOptionType",
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
@@ -32070,17 +32077,9 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputSwitchPassThroughOptionType",
+                            "type": "InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the input's DOM element."
-                        },
-                        {
-                            "name": "slider",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "InputSwitchPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the slider's DOM element."
+                            "description": "Used to pass attributes to the InputText component."
                         },
                         {
                             "name": "hooks",
@@ -32093,7 +32092,7 @@
                     ],
                     "methods": []
                 },
-                "InputSwitchPassThroughAttributes": {
+                "InputOtpPassThroughAttributes": {
                     "description": "Custom passthrough attributes for each DOM elements",
                     "relatedProp": "",
                     "props": [
@@ -32106,21 +32105,80 @@
                     ],
                     "methods": []
                 },
-                "InputSwitchState": {
-                    "description": "Defines current inline state in InputSwitch component.",
+                "InputOtpState": {
+                    "description": "Defines current inline state in InputOtp component.",
                     "relatedProp": "",
                     "props": [
                         {
-                            "name": "[key: string]",
+                            "name": "tokens",
                             "optional": false,
                             "readonly": false,
-                            "type": "any"
+                            "type": "string[] | number[]",
+                            "default": "",
+                            "description": "Array of input tokens"
                         }
                     ],
                     "methods": []
                 },
-                "InputSwitchProps": {
-                    "description": "Defines valid properties in InputSwitch component.",
+                "InputOtpTemplateAttrsOptions": {
+                    "description": "InputOtp attr options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Input token value"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpTemplateEvents": {
+                    "description": "InputOtp templating events",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "input",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "keydown",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "focus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "blur",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "paste",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputOtpProps": {
+                    "description": "Defines valid properties in InputOtp component.",
                     "relatedProp": "",
                     "props": [
                         {
@@ -32129,23 +32187,7 @@
                             "readonly": false,
                             "type": "string | boolean",
                             "default": "false",
-                            "description": "Specifies whether a inputswitch should be checked or not."
-                        },
-                        {
-                            "name": "trueValue",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "any",
-                            "default": "true",
-                            "description": "Value in checked state."
-                        },
-                        {
-                            "name": "falseValue",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "any",
-                            "default": "false",
-                            "description": "Value in unchecked state."
+                            "description": "Specifies whether a inputotp should be checked or not."
                         },
                         {
                             "name": "invalid",
@@ -32168,9 +32210,17 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "",
+                            "default": "false",
                             "description": "When present, it specifies that an input field is read-only."
                         },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
                         {
                             "name": "tabindex",
                             "optional": true,
@@ -32180,50 +32230,34 @@
                             "description": "Index of the element in tabbing order."
                         },
                         {
-                            "name": "inputId",
+                            "name": "length",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Identifier of the underlying input element."
+                            "type": "number",
+                            "default": "4",
+                            "description": "Number of characters to initiate."
                         },
                         {
-                            "name": "inputClass",
+                            "name": "mask",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | object",
-                            "default": "",
-                            "description": "Style class of the input field."
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Mask pattern."
                         },
                         {
-                            "name": "inputStyle",
+                            "name": "integerOnly",
                             "optional": true,
                             "readonly": false,
-                            "type": "object",
-                            "default": "",
-                            "description": "Inline style of the input field."
-                        },
-                        {
-                            "name": "ariaLabelledby",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
-                        },
-                        {
-                            "name": "ariaLabel",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Establishes a string value that labels the component."
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is integer-only."
                         },
                         {
                             "name": "pt",
                             "optional": true,
                             "readonly": false,
-                            "type": "PassThrough<InputSwitchPassThroughOptions>",
+                            "type": "PassThrough<InputOtpPassThroughOptions>",
                             "default": "",
                             "description": "Used to pass attributes to DOM elements inside the component."
                         },
@@ -32246,36 +32280,27 @@
                     ],
                     "methods": []
                 },
-                "InputSwitchContext": {
-                    "description": "Defines current options in InputSwitch component.",
-                    "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "checked",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "boolean",
-                            "default": "false",
-                            "description": "Current checked state of the item as a boolean."
-                        },
-                        {
-                            "name": "disabled",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "boolean",
-                            "default": "false",
-                            "description": "Current disabled state of the item as a boolean."
-                        }
-                    ],
-                    "methods": []
-                },
-                "InputSwitchSlots": {
+                "InputOtpSlots": {
+                    "description": "",
                     "relatedProp": "",
                     "props": [],
-                    "methods": []
+                    "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">events</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateEvents</span>, <span class=\"doc-option-parameter-type\">// Events of the component</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">attrs</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">index</span>: number) &rArr; InputOtpTemplateAttrsOptions</span>, <span class=\"doc-option-parameter-type\">// Attributes of the component</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the input field</span>\n }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Default content slot."
+                        }
+                    ]
                 },
-                "InputSwitchEmits": {
-                    "description": "Defines valid emits in InputSwitch component.",
+                "InputOtpEmits": {
+                    "description": "Defines valid emits in InputOtp component.",
                     "relatedProp": "",
                     "props": [],
                     "methods": [
@@ -32338,8 +32363,8 @@
         "types": {
             "description": "Defines the custom types used by the module.",
             "values": {
-                "InputSwitchPassThroughOptionType": {
-                    "values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
+                "InputOtpPassThroughOptionType": {
+                    "values": "InputOtpPassThroughAttributes | (options: InputOtpPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }
@@ -32440,14 +32465,6 @@
                             "default": "",
                             "description": "Defines valid properties."
                         },
-                        {
-                            "name": "state",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "InputSwitchState",
-                            "default": "",
-                            "description": "Defines current inline state."
-                        },
                         {
                             "name": "context",
                             "optional": false,
@@ -32535,19 +32552,6 @@
                     ],
                     "methods": []
                 },
-                "InputSwitchState": {
-                    "description": "Defines current inline state in InputSwitch component.",
-                    "relatedProp": "",
-                    "props": [
-                        {
-                            "name": "[key: string]",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "any"
-                        }
-                    ],
-                    "methods": []
-                },
                 "InputSwitchProps": {
                     "description": "Defines valid properties in InputSwitch component.",
                     "relatedProp": "",

From e3ff6a13b077174d875a74a9a2c8a56d956d5ea6 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 22 Feb 2024 12:19:35 +0300
Subject: [PATCH 32/36] Removed prev and next element finding errors

---
 components/lib/inputotp/InputOtp.vue | 12 ++++++++----
 doc/inputotp/AccessibilityDoc.vue    |  6 +++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index d72d356ef..7a390d6df 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -92,7 +92,7 @@ export default {
             });
         },
         moveToPrev(event) {
-            var prevInput = this.findPrevInput(event.target);
+            let prevInput = this.findPrevInput(event.target);
 
             if (prevInput) {
                 prevInput.focus();
@@ -100,7 +100,7 @@ export default {
             }
         },
         moveToNext(event) {
-            var nextInput = this.findNextInput(event.target);
+            let nextInput = this.findNextInput(event.target);
 
             if (nextInput) {
                 nextInput.focus();
@@ -108,12 +108,16 @@ export default {
             }
         },
         findNextInput(element) {
-            var nextElement = element.nextElementSibling;
+            let nextElement = element.nextElementSibling;
+
+            if (!nextElement) return;
 
             return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
         },
         findPrevInput(element) {
-            var prevElement = element.previousElementSibling;
+            let prevElement = element.previousElementSibling;
+
+            if (!prevElement) return;
 
             return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
         },
diff --git a/doc/inputotp/AccessibilityDoc.vue b/doc/inputotp/AccessibilityDoc.vue
index 29470c777..78d025d80 100644
--- a/doc/inputotp/AccessibilityDoc.vue
+++ b/doc/inputotp/AccessibilityDoc.vue
@@ -23,7 +23,11 @@
                     </tr>
                     <tr>
                         <td><i>left arrow</i></td>
-                        <td>Moves focus to the next previous element.</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>

From 8bf84003bdabb692a4c4eeba41eec4b4832d8ee4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 12:35:09 +0300
Subject: [PATCH 33/36] Updated stepper demos

---
 doc/stepper/BasicDoc.vue    |  80 ++++---
 doc/stepper/LinearDoc.vue   |  80 ++++---
 doc/stepper/TemplateDoc.vue | 421 +++++++++++++++++-------------------
 doc/stepper/VerticalDoc.vue |  80 +++----
 4 files changed, 327 insertions(+), 334 deletions(-)

diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index 182a4ba12..55d642eb1 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -2,16 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper consists of one or more StepperPanel elements.</p>
     </DocSectionText>
-    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
+    <div class="card flex justify-content-center">
         <Stepper>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -22,18 +21,17 @@
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,13 +48,12 @@ export default {
                 basic: `
 <Stepper>
     <StepperPanel header="Header I">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ nextCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex pt-4 justify-content-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -67,18 +64,17 @@ export default {
             </div>
             <div class="flex pt-4 justify-content-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header III">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ prevCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-4 justify-content-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -86,16 +82,15 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -106,37 +101,41 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -147,27 +146,38 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+</style>
diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index 824c88b12..186c183b7 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -2,16 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper is linear by default to enforce completion of a previus step to proceed, set <i>linear</i> as true for non-linear mode.</p>
     </DocSectionText>
-    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
+    <div class="card flex justify-content-center">
         <Stepper linear>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -22,18 +21,17 @@
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,13 +48,12 @@ export default {
                 basic: `
 <Stepper linear>
     <StepperPanel header="Header I">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ nextCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex pt-4 justify-content-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -67,18 +64,17 @@ export default {
             </div>
             <div class="flex pt-4 justify-content-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header III">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ prevCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-4 justify-content-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -86,16 +82,15 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper linear>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -106,37 +101,41 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper linear>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -147,27 +146,38 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+</style>
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index b2ef874f1..557b67aae 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -2,23 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
     </DocSectionText>
-    <div class="card flex flex-column justify-content-center" style="padding-left: 20rem; padding-right: 20rem">
+    <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-user" />
                         </span>
-                        <span class="text-base ml-2">Account</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                        <h3 class="text-center mt-3">Create your account</h3>
+                <template #content="{ nextCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -39,66 +35,58 @@
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-star" />
                         </span>
-                        <span class="text-base ml-2">Interests</span>
-                    </div>
+                    </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3">Create your interests</h3>
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                         <div class="flex flex-wrap justify-content-center gap-3">
-                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                            <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-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-id-card" />
                         </span>
-                        <span class="text-base ml-2">Complete</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
-                        <div class="flex justify-content-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                <template #content="{ prevCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 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-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -116,31 +104,29 @@ export default {
             email: null,
             password: null,
             option1: false,
-            option2: true,
+            option2: false,
             option3: false,
-            option4: true,
+            option4: false,
             option5: false,
-            option6: true,
-            option7: true,
-            option8: true,
+            option6: false,
+            option7: false,
+            option8: false,
+            option9: false,
+            option10: false,
             code: {
                 basic: `
 <Stepper v-model:activeStep="active">
     <StepperPanel>
-        <template #header="{ index, clickCallback, headerClass, numberClass }">
-            <div :class="headerClass" @click="clickCallback">
-                <span :class="[numberClass, 'text-color']">
-                    <i v-if="index < active" class="pi pi-check font-semibold" />
-                    <template v-else>
-                        {{ index + 1 }}
-                    </template>
+        <template #header="{ index, clickCallback }">
+            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <i class="pi pi-user" />
                 </span>
-                <span class="text-base ml-2">Account</span>
-            </div>
+            </button>
         </template>
-        <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                <h3 class="text-center mt-3">Create your account</h3>
+        <template #content="{ nextCallback }">
+            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                 <div class="field p-fluid">
                     <IconField>
                         <InputIcon>
@@ -161,63 +147,58 @@ export default {
                     <Password v-model="password" toggleMask placeholder="Password" />
                 </div>
             </div>
-            <div class="flex pt-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex pt-4 justify-content-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel>
-        <template #header="{ index, clickCallback, headerClass, numberClass }">
-            <div :class="headerClass" @click="clickCallback">
-                <span :class="[numberClass, 'text-color']">
-                    <i v-if="index < active" class="pi pi-check font-semibold" />
-                    <template v-else>
-                        {{ index + 1 }}
-                    </template>
+        <template #header="{ index, clickCallback }">
+            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <i class="pi pi-star" />
                 </span>
-                <span class="text-base ml-2">Interests</span>
-            </div>
+            </button>
         </template>
         <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                <h3 class="text-center mt-3">Create your interests</h3>
+            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                 <div class="flex flex-wrap justify-content-center gap-3">
-                    <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                    <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                    <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                    <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                    <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                    <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                    <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                    <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                    <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-4 justify-content-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel>
-        <template #header="{ index, clickCallback, headerClass, numberClass }">
-            <div :class="headerClass" @click="clickCallback">
-                <span :class="[numberClass, 'text-color']">
-                    <i v-if="index < active" class="pi pi-check font-semibold" />
-                    <template v-else>
-                        {{ index + 1 }}
-                    </template>
+        <template #header="{ index, clickCallback }">
+            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <i class="pi pi-id-card" />
                 </span>
-                <span class="text-base ml-2">Complete</span>
-            </div>
+            </button>
         </template>
-        <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
+        <template #content="{ prevCallback }">
+            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-3 mb-3 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-4 justify-content-between">
+            <div class="flex pt-4 justify-content-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -225,23 +206,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column justify-content-center">
+    <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-user" />
                         </span>
-                        <span class="text-base ml-2">Account</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                        <h3 class="text-center mt-3">Create your account</h3>
+                <template #content="{ nextCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -262,66 +239,58 @@ export default {
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-star" />
                         </span>
-                        <span class="text-base ml-2">Interests</span>
-                    </div>
+                    </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3">Create your interests</h3>
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                         <div class="flex flex-wrap justify-content-center gap-3">
-                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                            <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-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-id-card" />
                         </span>
-                        <span class="text-base ml-2">Complete</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
-                        <div class="flex justify-content-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                <template #content="{ prevCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 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-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -338,37 +307,42 @@ export default {
             email: null,
             password: null,
             option1: false,
-            option2: true,
+            option2: false,
             option3: false,
-            option4: true,
+            option4: false,
             option5: false,
-            option6: true,
-            option7: true,
-            option8: true,
+            option6: false,
+            option7: false,
+            option8: false,
+            option9: false,
+            option10: false
         }
     }
 }
 <\/script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 40rem;
+}
+<\/style>
+
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column justify-content-center">
+    <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-user" />
                         </span>
-                        <span class="text-base ml-2">Account</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                        <h3 class="text-center mt-3">Create your account</h3>
+                <template #content="{ nextCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -389,66 +363,58 @@ export default {
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-star" />
                         </span>
-                        <span class="text-base ml-2">Interests</span>
-                    </div>
+                    </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3">Create your interests</h3>
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                         <div class="flex flex-wrap justify-content-center gap-3">
-                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                            <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-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-id-card" />
                         </span>
-                        <span class="text-base ml-2">Complete</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
-                        <div class="flex justify-content-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                <template #content="{ prevCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 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-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -466,18 +432,33 @@ const name = ref();
 const email = ref();
 const password = ref();
 const option1 = ref(false);
-const option2 = ref(true);
+const option2 = ref(false);
 const option3 = ref(false);
-const option4 = ref(true);
+const option4 = ref(false);
 const option5 = ref(false);
-const option6 = ref(true);
-const option7 = ref(true);
-const option8 = ref(true);
+const option6 = ref(false);
+const option7 = ref(false);
+const option8 = ref(false);
+const option9 = ref(false);
+const option10 = ref(false);
 
 <\/script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 40rem;
+}
+<\/style>
+
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 40rem;
+}
+</style>
diff --git a/doc/stepper/VerticalDoc.vue b/doc/stepper/VerticalDoc.vue
index a066d5ed9..f6bcba0e7 100644
--- a/doc/stepper/VerticalDoc.vue
+++ b/doc/stepper/VerticalDoc.vue
@@ -5,13 +5,12 @@
     <div class="card">
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -20,20 +19,19 @@
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,13 +48,12 @@ export default {
                 basic: `
 <Stepper orientation="vertical">
     <StepperPanel header="Header I">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ nextCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
             </div>
-            <div class="flex py-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex py-4">
+                <Button label="Next" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -65,20 +62,19 @@ export default {
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
             </div>
-            <div class="flex py-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex py-4 gap-2">
+                <Button label="Back" severity="secondary" @click="prevCallback" />
+                <Button label="Next" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header III">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ prevCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
             </div>
-            <div class="flex py-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+            <div class="flex py-4">
+                <Button label="Back" severity="secondary" @click="prevCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -89,13 +85,12 @@ export default {
     <div class="card">
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -104,20 +99,19 @@ export default {
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -130,13 +124,12 @@ export default {
     <div class="card">
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -145,20 +138,19 @@ export default {
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
             </StepperPanel>

From 02b4daead294c9141bc037fc23e141948847e4eb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 12:45:53 +0300
Subject: [PATCH 34/36] Update stepper docs

---
 doc/stepper/BasicDoc.vue    | 5 ++++-
 doc/stepper/LinearDoc.vue   | 2 +-
 doc/stepper/TemplateDoc.vue | 2 +-
 doc/stepper/VerticalDoc.vue | 2 +-
 pages/stepper/index.vue     | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index 55d642eb1..620acaa40 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Stepper consists of one or more StepperPanel elements.</p>
+        <p>
+            Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead <i>prevCallback</i> and
+            <i>nextCallback</i> events should be bound to your custom UI elements.
+        </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Stepper>
diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index 186c183b7..dedbff99d 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Stepper is linear by default to enforce completion of a previus step to proceed, set <i>linear</i> as true for non-linear mode.</p>
+        <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-content-center">
         <Stepper linear>
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index 557b67aae..b0d98cd6b 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
+        <p>Stepper provides various templating options to customize the default UI design.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
diff --git a/doc/stepper/VerticalDoc.vue b/doc/stepper/VerticalDoc.vue
index f6bcba0e7..2f2269f3b 100644
--- a/doc/stepper/VerticalDoc.vue
+++ b/doc/stepper/VerticalDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
+        <p>Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as available options.</p>
     </DocSectionText>
     <div class="card">
         <Stepper orientation="vertical">
diff --git a/pages/stepper/index.vue b/pages/stepper/index.vue
index 6798e5b48..e4f856aa8 100644
--- a/pages/stepper/index.vue
+++ b/pages/stepper/index.vue
@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue Stepper Component"
         header="Stepper"
-        description="Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process."
+        description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
         :componentDocs="docs"
         :themingDocs="themingDoc"
         :ptTabComponent="ptComponent"

From 68741f54d521d8bb35efcfd548952db1094c1d82 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 22 Feb 2024 15:12:55 +0300
Subject: [PATCH 35/36] Fixed #5322 - SplitterPanel: nested context hydration
 fixed

---
 components/lib/splitter/Splitter.vue           | 16 ++++++++--------
 components/lib/splitterpanel/SplitterPanel.vue |  9 ++++++++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/lib/splitter/Splitter.vue b/components/lib/splitter/Splitter.vue
index 98e7c1a6c..a62031f4a 100644
--- a/components/lib/splitter/Splitter.vue
+++ b/components/lib/splitter/Splitter.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions())">
+    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions)">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
             <div
@@ -80,13 +80,6 @@ export default {
         this.unbindMouseListeners();
     },
     methods: {
-        getPTOptions() {
-            return {
-                context: {
-                    nested: DomHandler.getAttribute(this.$parentInstance?.$el, 'data-pc-name') === 'splitterpanel'
-                }
-            };
-        },
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
@@ -379,6 +372,13 @@ export default {
         },
         horizontal() {
             return this.layout === 'horizontal';
+        },
+        getPTOptions() {
+            return {
+                context: {
+                    nested: this.$parentInstance?.nestedState
+                }
+            };
         }
     }
 };
diff --git a/components/lib/splitterpanel/SplitterPanel.vue b/components/lib/splitterpanel/SplitterPanel.vue
index e94403c10..f510ecdcc 100644
--- a/components/lib/splitterpanel/SplitterPanel.vue
+++ b/components/lib/splitterpanel/SplitterPanel.vue
@@ -11,10 +11,17 @@ export default {
     name: 'SplitterPanel',
     extends: BaseSplitterPanel,
     inheritAttrs: false,
+    data() {
+        return {
+            nestedState: null
+        };
+    },
     computed: {
         isNested() {
             return this.$slots.default().some((child) => {
-                return child.type.name === 'Splitter';
+                this.nestedState = child.type.name === 'Splitter' ? true : null;
+
+                return this.nestedState;
             });
         },
         getPTOptions() {

From 47a2324b24d99e9ebc32c31c60ff339a0ec0bc6c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 22 Feb 2024 16:02:09 +0300
Subject: [PATCH 36/36] Delete InputOtp.spec.js

---
 components/lib/inputotp/InputOtp.spec.js | 20 --------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 components/lib/inputotp/InputOtp.spec.js

diff --git a/components/lib/inputotp/InputOtp.spec.js b/components/lib/inputotp/InputOtp.spec.js
deleted file mode 100644
index df8f16fc5..000000000
--- a/components/lib/inputotp/InputOtp.spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { mount } from '@vue/test-utils';
-import InputSwitch from './InputSwitch.vue';
-
-describe('InputSwitch.vue', () => {
-    it('should exist', async () => {
-        const wrapper = mount(InputSwitch);
-
-        expect(wrapper.find('.p-inputswitch.p-component').exists()).toBe(true);
-        expect(wrapper.find('.p-inputswitch-slider').exists()).toBe(true);
-
-        await wrapper.vm.onChange({});
-
-        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
-
-        await wrapper.setProps({ modelValue: true });
-
-        expect(wrapper.vm.checked).toBe(true);
-        expect(wrapper.find('.p-inputswitch').classes()).toContain('p-highlight');
-    });
-});