diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index 7025ca21c..1334a888b 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -33,10 +33,6 @@
                 {
                     "name": "CDN",
                     "to": "/cdn"
-                },
-                {
-                    "name": "PrimeCLT",
-                    "to": "/primeclt"
                 }
             ]
         },
diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss
index a4e42d79a..4ef77a130 100644
--- a/apps/showcase/assets/styles/layout/_sidebar.scss
+++ b/apps/showcase/assets/styles/layout/_sidebar.scss
@@ -119,7 +119,7 @@
                             display: flex;
                             align-items: center;
                             padding: .5rem .5rem .5rem 1rem;
-                            color: var(--text-color);
+                            color: var(--text-secondary-color);
                             transition: outline-color 0.2s, border-color .2s;
                             outline-color: transparent;
                             position: relative;
diff --git a/apps/showcase/doc/accordion/BasicDoc.vue b/apps/showcase/doc/accordion/BasicDoc.vue
index 6a2996eaf..5d089978d 100644
--- a/apps/showcase/doc/accordion/BasicDoc.vue
+++ b/apps/showcase/doc/accordion/BasicDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Accordion comprises a combination of <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property, and that can be set to Accordion's
-            <i>value</i> property to extend any panel.
-        </p>
+        <p>Accordion is defined using <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property to specify the active item.</p>
     </DocSectionText>
     <div class="card">
         <Accordion value="0">
diff --git a/apps/showcase/doc/accordion/ControlledDoc.vue b/apps/showcase/doc/accordion/ControlledDoc.vue
index 5f1560cd1..b54eede69 100644
--- a/apps/showcase/doc/accordion/ControlledDoc.vue
+++ b/apps/showcase/doc/accordion/ControlledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Accordion can be controlled programmatically using a binding to <i>value</i> along with <i>v-model</i> to update the active value.</p>
+        <p>Panels can be controlled programmatically using <i>value</i> property as a model.</p>
     </DocSectionText>
     <div class="card">
         <div class="flex mb-4 gap-2 justify-end">
diff --git a/apps/showcase/doc/accordion/TemplateDoc.vue b/apps/showcase/doc/accordion/TemplateDoc.vue
index 65b011bb6..a2db25b6a 100644
--- a/apps/showcase/doc/accordion/TemplateDoc.vue
+++ b/apps/showcase/doc/accordion/TemplateDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Header content of a panel is customized with the <i>default</i> slot.</p>
+        <p>
+            Custom content for a header is defined with the default slot. The optional <i>as</i> property controls the default container element of a header, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
+            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own header.
+        </p>
     </DocSectionText>
     <div class="card">
         <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
diff --git a/apps/showcase/doc/nuxt/configuration/ImportPTDoc.vue b/apps/showcase/doc/nuxt/configuration/ImportPTDoc.vue
index 4f0a5b825..bdd3f3c54 100644
--- a/apps/showcase/doc/nuxt/configuration/ImportPTDoc.vue
+++ b/apps/showcase/doc/nuxt/configuration/ImportPTDoc.vue
@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Configures the global pass through import path.</p>
         <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <p><i>mycustompt.js</i> file defines the configuration and exports it.</p>
         <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
@@ -13,13 +14,13 @@ export default {
             code1: {
                 basic: `
 primevue: {
-    importPT: { as: 'MyCustomPreset', from: path.resolve(__dirname, './presets/mypreset.js')}
+    importPT: { from: '@/passthrough/mycustompt.js')}
 }
 `
             },
             code2: {
                 basic: `
-const MyPreset = {
+const MyCustomPT = {
     ...
     button: {
         root: 'my-button',
@@ -28,7 +29,7 @@ const MyPreset = {
     ...
 }
 
-export default MyPreset;
+export default MyCustomPT;
 `
             }
         };
diff --git a/apps/showcase/doc/nuxt/configuration/ImportThemeDoc.vue b/apps/showcase/doc/nuxt/configuration/ImportThemeDoc.vue
index daad45c47..2c82f9f56 100644
--- a/apps/showcase/doc/nuxt/configuration/ImportThemeDoc.vue
+++ b/apps/showcase/doc/nuxt/configuration/ImportThemeDoc.vue
@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Configures the theme configuration path for the customizations of a theme in styled mode.</p>
         <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <p>The <i>mytheme.js</i> file contains the theme configuration.</p>
         <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
diff --git a/apps/showcase/doc/stepper/HorizontalDoc.vue b/apps/showcase/doc/stepper/HorizontalDoc.vue
index 465b7c169..ccbc7d49c 100644
--- a/apps/showcase/doc/stepper/HorizontalDoc.vue
+++ b/apps/showcase/doc/stepper/HorizontalDoc.vue
@@ -1,8 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <DocSectionText v-bind="$attrs">
-            <p>Stepepr comprises a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
-        </DocSectionText>
+        <p>Stepepr consists of a combination of <i>StepList</i>, <i>Step</i>, <i>StepPanels</i> and <i>StepPanel</i> components. The <i>value</i> property is essential for associating Step and StepPanel with each other.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Stepper value="1" class="basis-[50rem]">
@@ -16,8 +14,8 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
-                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
                 <StepPanel v-slot="{ activateCallback }" value="2">
@@ -33,7 +31,7 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="pt-6">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -60,8 +58,8 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex pt-6 justify-start">
-                <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+            <div class="flex pt-6 justify-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
             </div>
         </StepPanel>
         <StepPanel v-slot="{ activateCallback }" value="2">
@@ -77,7 +75,7 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-6 justify-start">
+            <div class="pt-6">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
             </div>
         </StepPanel>
@@ -98,8 +96,8 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
-                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+                   <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
                 <StepPanel v-slot="{ activateCallback }" value="2">
@@ -115,7 +113,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="pt-6">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -138,8 +136,8 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
-                        <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
+                    <div class="flex pt-6 justify-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
                 <StepPanel v-slot="{ activateCallback }" value="2">
@@ -155,7 +153,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="pt-6">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
diff --git a/apps/showcase/doc/stepper/LinearDoc.vue b/apps/showcase/doc/stepper/LinearDoc.vue
index 71e310cbe..a7600922c 100644
--- a/apps/showcase/doc/stepper/LinearDoc.vue
+++ b/apps/showcase/doc/stepper/LinearDoc.vue
@@ -14,7 +14,7 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -31,7 +31,7 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="pt-6">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -58,7 +58,7 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex pt-6 justify-start">
+           <div class="flex pt-6 justify-end">
                 <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
             </div>
         </StepPanel>
@@ -75,7 +75,7 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-6 justify-start">
+            <div class="pt-6">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
             </div>
         </StepPanel>
@@ -96,7 +96,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -113,7 +113,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="pt-6">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -136,7 +136,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="flex pt-6 justify-end">
                         <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -153,7 +153,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="pt-6">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
diff --git a/apps/showcase/doc/stepper/TemplateDoc.vue b/apps/showcase/doc/stepper/TemplateDoc.vue
index eb5fc338f..622595053 100644
--- a/apps/showcase/doc/stepper/TemplateDoc.vue
+++ b/apps/showcase/doc/stepper/TemplateDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content for a tab is defined using <i>as</i> or <i>asChild</i> properties.</p>
+        <p>
+            Custom content for a step is defined with the default slot. The optional <i>as</i> property controls the default container element of a step, for example setting it to a <i>button</i> renders a button for the header instead of a div. The
+            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own step.
+        </p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Stepper v-model:value="activeStep" class="basis-[40rem]">
diff --git a/apps/showcase/doc/stepper/VerticalDoc.vue b/apps/showcase/doc/stepper/VerticalDoc.vue
index edde9e203..9ed030be5 100644
--- a/apps/showcase/doc/stepper/VerticalDoc.vue
+++ b/apps/showcase/doc/stepper/VerticalDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Layout of the Stepper is configured with the <i>StepItem</i> helper component.</p>
+        <p>Horizontal layout requires <i>StepItem</i> as a wrapper of <i>Step</i> and <i>StepPanel</i> components.</p>
     </DocSectionText>
     <div class="card">
         <Stepper value="1">
@@ -10,7 +10,7 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="py-6">
                         <Button label="Next" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -21,9 +21,9 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-between">
+                    <div class="flex py-6 gap-2">
                         <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                        <Button label="Next" iconPos="right" @click="activateCallback('3')" />
+                        <Button label="Next" @click="activateCallback('3')" />
                     </div>
                 </StepPanel>
             </StepItem>
@@ -33,7 +33,7 @@
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="py-6">
                         <Button label="Back" severity="secondary" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -56,7 +56,7 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex pt-6 justify-start">
+             <div class="py-6">
                 <Button label="Next" @click="activateCallback('2')" />
             </div>
         </StepPanel>
@@ -67,9 +67,9 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
             </div>
-            <div class="flex pt-6 justify-between">
+            <div class="flex py-6 gap-2">
                 <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                <Button label="Next" iconPos="right" @click="activateCallback('3')" />
+                <Button label="Next" @click="activateCallback('3')" />
             </div>
         </StepPanel>
     </StepItem>
@@ -79,7 +79,7 @@ export default {
             <div class="flex flex-col h-48">
                 <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-6 justify-start">
+             <div class="py-6">
                 <Button label="Back" severity="secondary" @click="activateCallback('2')" />
             </div>
         </StepPanel>
@@ -96,7 +96,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                     <div class="py-6">
                         <Button label="Next" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -107,9 +107,9 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-between">
+                    <div class="flex py-6 gap-2">
                         <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                        <Button label="Next" iconPos="right" @click="activateCallback('3')" />
+                        <Button label="Next" @click="activateCallback('3')" />
                     </div>
                 </StepPanel>
             </StepItem>
@@ -119,7 +119,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                     <div class="py-6">
                         <Button label="Back" severity="secondary" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -138,7 +138,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="py-6">
                         <Button label="Next" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
@@ -149,9 +149,9 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex pt-6 justify-between">
+                    <div class="flex py-6 gap-2">
                         <Button label="Back" severity="secondary" @click="activateCallback('1')" />
-                        <Button label="Next" iconPos="right" @click="activateCallback('3')" />
+                        <Button label="Next" @click="activateCallback('3')" />
                     </div>
                 </StepPanel>
             </StepItem>
@@ -161,7 +161,7 @@ export default {
                     <div class="flex flex-col h-48">
                         <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-6 justify-start">
+                    <div class="py-6">
                         <Button label="Back" severity="secondary" @click="activateCallback('2')" />
                     </div>
                 </StepPanel>
diff --git a/apps/showcase/doc/tabs/BasicDoc.vue b/apps/showcase/doc/tabs/BasicDoc.vue
index 6acf0775d..38d298810 100644
--- a/apps/showcase/doc/tabs/BasicDoc.vue
+++ b/apps/showcase/doc/tabs/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tabs comprises a combination of <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. The <i>value</i> property is essential for associating Tab and TabPanel with each other.</p>
+        <p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
     </DocSectionText>
     <div class="card">
         <Tabs value="0">
diff --git a/apps/showcase/doc/tabs/ControlledDoc.vue b/apps/showcase/doc/tabs/ControlledDoc.vue
index b734c005f..496cd0832 100644
--- a/apps/showcase/doc/tabs/ControlledDoc.vue
+++ b/apps/showcase/doc/tabs/ControlledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tabs can be controlled programmatically using <i>value</i> property.</p>
+        <p>Tabs can be controlled programmatically using <i>value</i> property as a model.</p>
     </DocSectionText>
     <div class="card">
         <div class="flex mb-2 gap-2 justify-end">
diff --git a/apps/showcase/doc/tabs/TemplateDoc.vue b/apps/showcase/doc/tabs/TemplateDoc.vue
index 86920e840..346ae952f 100644
--- a/apps/showcase/doc/tabs/TemplateDoc.vue
+++ b/apps/showcase/doc/tabs/TemplateDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content for a tab is defined using <i>as</i> or <i>asChild</i> properties.</p>
+        <p>
+            Custom content for a tab is defined with the default slot. The optional <i>as</i> property controls the default container element of a tab, for example setting it to a <i>div</i> renders a div for the header instead of a button. The
+            <i>asChild</i> option enables the headless mode for further customization by passing callbacks and properties to implement your own tab header.
+        </p>
     </DocSectionText>
     <div class="card">
         <Tabs value="0">
diff --git a/apps/showcase/pages/tabs/index.vue b/apps/showcase/pages/tabs/index.vue
index accdd8de9..39307c757 100755
--- a/apps/showcase/pages/tabs/index.vue
+++ b/apps/showcase/pages/tabs/index.vue
@@ -64,7 +64,7 @@ export default {
                 },
                 {
                     id: 'tabmenu',
-                    label: 'TabMenu',
+                    label: 'Tab Menu',
                     component: TabMenuDoc
                 },
                 {
diff --git a/packages/metadata/src/components/index.ts b/packages/metadata/src/components/index.ts
index b2304580a..6d95bd017 100644
--- a/packages/metadata/src/components/index.ts
+++ b/packages/metadata/src/components/index.ts
@@ -55,6 +55,11 @@ export const panel: MetaType[] = toMeta([
     'Splitter',
     'SplitterPanel',
     'Stepper',
+    'StepList',
+    'Step',
+    'StepItem',
+    'StepPanels',
+    'StepPanel',
     'StepperPanel',
     'TabView',
     'Tabs',