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] 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',