diff --git a/apps/showcase/doc/confirmdialog/pt/index.vue b/apps/showcase/doc/confirmdialog/pt/index.vue
index 7478549b9..6742e92e8 100644
--- a/apps/showcase/doc/confirmdialog/pt/index.vue
+++ b/apps/showcase/doc/confirmdialog/pt/index.vue
@@ -21,6 +21,7 @@ export default {
                     id: 'pt.image',
                     label: 'Wireframe',
                     component: PTImage
+                    label: 'Viewer',
                 },
                 {
                     id: 'pt.doc.confirmdialog',
diff --git a/apps/showcase/doc/steps/AccessibilityDoc.vue b/apps/showcase/doc/steps/AccessibilityDoc.vue
deleted file mode 100644
index 9e7015deb..000000000
--- a/apps/showcase/doc/steps/AccessibilityDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current step
-            item defines <i>aria-current</i> as "step".
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last step if readonly is not enabled.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/steps/BasicDoc.vue b/apps/showcase/doc/steps/BasicDoc.vue
deleted file mode 100644
index 5302e6537..000000000
--- a/apps/showcase/doc/steps/BasicDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/ControlledDoc.vue b/apps/showcase/doc/steps/ControlledDoc.vue
deleted file mode 100644
index 70edc051c..000000000
--- a/apps/showcase/doc/steps/ControlledDoc.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-8 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-</div>
-<Steps v-model:activeStep="active" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/ImportDoc.vue b/apps/showcase/doc/steps/ImportDoc.vue
deleted file mode 100644
index 292965415..000000000
--- a/apps/showcase/doc/steps/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Steps from 'primevue/steps';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/LinearDoc.vue b/apps/showcase/doc/steps/LinearDoc.vue
deleted file mode 100644
index 3fda1ca35..000000000
--- a/apps/showcase/doc/steps/LinearDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps is linear by default to enforce completion of a previus step to proceed, set <i>readonly</i> as false for non-linear mode.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" :readonly="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" :readonly="false" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" :readonly="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/TemplateDoc.vue b/apps/showcase/doc/steps/TemplateDoc.vue
deleted file mode 100644
index 2327626ae..000000000
--- a/apps/showcase/doc/steps/TemplateDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps offers item customization with the <i>item</i> template that receives the item instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    icon: 'pi pi-user'
-                },
-                {
-                    icon: 'pi pi-calendar'
-                },
-                {
-                    icon: 'pi pi-check'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" class="custom-steps" :readonly="false">
-    <template #item="{ item, active }">
-        <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-            <i :class="[item.icon, '!text-xl']" />
-        </span>
-    </template>
-</Steps>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    icon: 'pi pi-user'
-                },
-                {
-                    icon: 'pi pi-calendar'
-                },
-                {
-                    icon: 'pi pi-check'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-<\/style>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        icon: 'pi pi-user'
-    },
-    {
-        icon: 'pi pi-calendar'
-    },
-    {
-        icon: 'pi pi-check'
-    }
-]);
-
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-<\/style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-</style>
diff --git a/apps/showcase/doc/steps/pt/PTImage.vue b/apps/showcase/doc/steps/pt/PTImage.vue
deleted file mode 100644
index a0f7288c3..000000000
--- a/apps/showcase/doc/steps/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/steps.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/steps/pt/index.vue b/apps/showcase/doc/steps/pt/index.vue
deleted file mode 100644
index 94048bfc0..000000000
--- a/apps/showcase/doc/steps/pt/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>Steps Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.steps',
-                    label: 'Steps PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('Steps')
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/theming/TailwindDoc.vue b/apps/showcase/doc/steps/theming/TailwindDoc.vue
deleted file mode 100644
index 4daa6c5f8..000000000
--- a/apps/showcase/doc/steps/theming/TailwindDoc.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
-            PrimeVue components with Tailwind CSS.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/steps/theming/index.vue b/apps/showcase/doc/steps/theming/index.vue
deleted file mode 100644
index acc869691..000000000
--- a/apps/showcase/doc/steps/theming/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>Steps Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    children: [
-                        {
-                            id: 'theming.classes',
-                            label: 'CSS Classes',
-                            description: 'List of class names used in the styled mode.',
-                            component: DocApiTable,
-                            data: getStyleOptions('Steps')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('Steps')
-                        }
-                    ]
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/AccessibilityDoc.vue b/apps/showcase/doc/tabmenu/AccessibilityDoc.vue
deleted file mode 100644
index b23b96b68..000000000
--- a/apps/showcase/doc/tabmenu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a
-            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/tabmenu/BasicDoc.vue b/apps/showcase/doc/tabmenu/BasicDoc.vue
deleted file mode 100644
index 153dcaf7e..000000000
--- a/apps/showcase/doc/tabmenu/BasicDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'Dashboard', icon: 'pi pi-home' },
-    { label: 'Transactions', icon: 'pi pi-chart-line' },
-    { label: 'Products', icon: 'pi pi-list' },
-    { label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/CommandDoc.vue b/apps/showcase/doc/tabmenu/CommandDoc.vue
deleted file mode 100644
index 360c59d82..000000000
--- a/apps/showcase/doc/tabmenu/CommandDoc.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Dashboard',
-                    icon: 'pi pi-home',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Transactions',
-                    icon: 'pi pi-chart-line',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Products',
-                    icon: 'pi pi-list',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Messages',
-                    icon: 'pi pi-inbox',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Dashboard',
-                    icon: 'pi pi-home',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Transactions',
-                    icon: 'pi pi-chart-line',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Products',
-                    icon: 'pi pi-list',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Messages',
-                    icon: 'pi pi-inbox',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-                    }
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'Dashboard',
-        icon: 'pi pi-home',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-        }
-    },
-    {
-        label: 'Transactions',
-        icon: 'pi pi-chart-line',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-        }
-    },
-    {
-        label: 'Products',
-        icon: 'pi pi-list',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-        }
-    },
-    {
-        label: 'Messages',
-        icon: 'pi pi-inbox',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-        }
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/ControlledDoc.vue b/apps/showcase/doc/tabmenu/ControlledDoc.vue
deleted file mode 100644
index 9558e1fa2..000000000
--- a/apps/showcase/doc/tabmenu/ControlledDoc.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-</div>
-
-<TabMenu v-model:activeIndex="active" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active.value = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active.value = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active.value = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-
-const items = ref([
-    { label: 'Dashboard', icon: 'pi pi-home' },
-    { label: 'Transactions', icon: 'pi pi-chart-line' },
-    { label: 'Products', icon: 'pi pi-list' },
-    { label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/ImportDoc.vue b/apps/showcase/doc/tabmenu/ImportDoc.vue
deleted file mode 100644
index db8558892..000000000
--- a/apps/showcase/doc/tabmenu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import TabMenu from 'primevue/tabmenu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/RouterDoc.vue b/apps/showcase/doc/tabmenu/RouterDoc.vue
deleted file mode 100644
index da365eca3..000000000
--- a/apps/showcase/doc/tabmenu/RouterDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-palette',
-                    command: () => {
-                        this.$router.push('/theming/unstyled');
-                    }
-                },
-                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items">
-    <template #item="{ item, props }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ item.label }}</span>
-        </a>
-    </template>
-</TabMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-palette',
-                    command: () => {
-                        this.$router.push('/theming/unstyled');
-                    }
-                },
-                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-palette',
-        command: () => {
-            this.$router.push('/theming/unstyled');
-        }
-    },
-    { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/TemplateDoc.vue b/apps/showcase/doc/tabmenu/TemplateDoc.vue
deleted file mode 100644
index d7bd86671..000000000
--- a/apps/showcase/doc/tabmenu/TemplateDoc.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items">
-    <template #item="{ item, props }">
-        <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-            <img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
-            <span class="font-bold">{{ item.name }}</span>
-        </a>
-    </template>
-</TabMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/pt/index.vue b/apps/showcase/doc/tabmenu/pt/index.vue
deleted file mode 100644
index b88d33df3..000000000
--- a/apps/showcase/doc/tabmenu/pt/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>TabMenu Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.tabmenu',
-                    label: 'TabMenu PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('TabMenu')
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/theming/TailwindDoc.vue b/apps/showcase/doc/tabmenu/theming/TailwindDoc.vue
deleted file mode 100644
index 4daa6c5f8..000000000
--- a/apps/showcase/doc/tabmenu/theming/TailwindDoc.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
-            PrimeVue components with Tailwind CSS.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/tabmenu/theming/index.vue b/apps/showcase/doc/tabmenu/theming/index.vue
deleted file mode 100644
index 745a3ead3..000000000
--- a/apps/showcase/doc/tabmenu/theming/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>TabMenu Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    children: [
-                        {
-                            id: 'theming.classes',
-                            label: 'CSS Classes',
-                            description: 'List of class names used in the styled mode.',
-                            component: DocApiTable,
-                            data: getStyleOptions('TabMenu')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('TabMenu')
-                        }
-                    ]
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/pages/steps/index.vue b/apps/showcase/pages/steps/index.vue
deleted file mode 100644
index 1872f7fb5..000000000
--- a/apps/showcase/pages/steps/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Stepper Component"
-        header="Steps"
-        description="Steps also known as Stepper, is an indicator for the steps in a workflow."
-        :componentDocs="docs"
-        :apiDocs="['Steps', 'MenuItem']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/steps/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/steps/BasicDoc.vue';
-import ControlledDoc from '@/doc/steps/ControlledDoc.vue';
-import ImportDoc from '@/doc/steps/ImportDoc.vue';
-import LinearDoc from '@/doc/steps/LinearDoc.vue';
-import TemplateDoc from '@/doc/steps/TemplateDoc.vue';
-import PTComponent from '@/doc/steps/pt/index.vue';
-import ThemingDoc from '@/doc/steps/theming/index.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'linear',
-                    label: 'Linear',
-                    component: LinearDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            ptComponent: PTComponent,
-            themingDoc: ThemingDoc
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/pages/tabmenu/index.vue b/apps/showcase/pages/tabmenu/index.vue
deleted file mode 100755
index 3676b0fe6..000000000
--- a/apps/showcase/pages/tabmenu/index.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue TabMenu Component"
-        header="TabMenu"
-        description="TabMenu is a navigation component displaying menu items as tabs."
-        :componentDocs="docs"
-        :apiDocs="['TabMenu', 'MenuItem']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tabmenu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/tabmenu/BasicDoc.vue';
-import ControlledDoc from '@/doc/tabmenu/ControlledDoc.vue';
-import ImportDoc from '@/doc/tabmenu/ImportDoc.vue';
-import RouterDoc from '@/doc/tabmenu/RouterDoc.vue';
-import CommandDoc from '@/doc/tabmenu/CommandDoc.vue';
-import TemplateDoc from '@/doc/tabmenu/TemplateDoc.vue';
-import PTComponent from '@/doc/tabmenu/pt/index.vue';
-import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            ptComponent: PTComponent,
-            themingDoc: ThemingDoc
-        };
-    }
-};
-</script>