From 033a50fcbb9e750392a2f07c9e43bca462e3b669 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Jun 2024 09:23:00 +0300
Subject: [PATCH] Fixed #5823 #5824 - New Stepper implementation

---
 components/lib/step/BaseStep.vue              |  34 +++
 components/lib/step/Step.d.ts                 | 187 ++++++++++++++
 components/lib/step/Step.vue                  |  98 +++++++
 components/lib/step/package.json              |  11 +
 components/lib/step/style/StepStyle.d.ts      |  31 +++
 components/lib/step/style/StepStyle.js        |  19 ++
 components/lib/step/style/package.json        |   6 +
 components/lib/stepitem/BaseStepItem.vue      |  22 ++
 components/lib/stepitem/StepItem.d.ts         | 121 +++++++++
 components/lib/stepitem/StepItem.vue          |  21 ++
 components/lib/stepitem/package.json          |  11 +
 .../lib/stepitem/style/StepItemStyle.d.ts     |  19 ++
 .../lib/stepitem/style/StepItemStyle.js       |  15 ++
 components/lib/stepitem/style/package.json    |   6 +
 components/lib/steplist/BaseStepList.vue      |  22 ++
 components/lib/steplist/StepList.d.ts         | 121 +++++++++
 components/lib/steplist/StepList.vue          |  15 ++
 components/lib/steplist/package.json          |  11 +
 .../lib/steplist/style/StepListStyle.d.ts     |  19 ++
 .../lib/steplist/style/StepListStyle.js       |  10 +
 components/lib/steplist/style/package.json    |   6 +
 components/lib/steppanel/BaseStepPanel.vue    |  30 +++
 components/lib/steppanel/StepPanel.d.ts       | 148 +++++++++++
 components/lib/steppanel/StepPanel.vue        |  99 +++++++
 components/lib/steppanel/package.json         |  11 +
 .../lib/steppanel/style/StepPanelStyle.d.ts   |  19 ++
 .../lib/steppanel/style/StepPanelStyle.js     |  16 ++
 components/lib/steppanel/style/package.json   |   6 +
 components/lib/steppanels/BaseStepPanels.vue  |  22 ++
 components/lib/steppanels/StepPanels.d.ts     | 121 +++++++++
 components/lib/steppanels/StepPanels.vue      |  15 ++
 components/lib/steppanels/package.json        |  11 +
 .../lib/steppanels/style/StepPanelsStyle.d.ts |  19 ++
 .../lib/steppanels/style/StepPanelsStyle.js   |  10 +
 components/lib/steppanels/style/package.json  |   6 +
 components/lib/stepper/BaseStepper.vue        |  10 +-
 components/lib/stepper/Stepper.d.ts           |  55 +---
 components/lib/stepper/Stepper.vue            | 244 +-----------------
 components/lib/stepper/StepperContent.vue     |  47 ----
 components/lib/stepper/StepperHeader.vue      |  41 ---
 components/lib/stepper/StepperSeparator.vue   |  14 +-
 .../lib/stepper/style/StepperStyle.d.ts       |  40 +--
 components/lib/stepper/style/StepperStyle.js  | 158 +++++-------
 components/lib/stepperpanel/StepperPanel.d.ts |   2 +
 components/lib/stepperpanel/StepperPanel.vue  |   5 +-
 components/lib/themes/aura/stepper/index.js   |  33 +--
 components/lib/themes/lara/stepper/index.js   |  33 +--
 components/lib/themes/nora/stepper/index.js   |  33 +--
 .../lib/themes/types/stepper/index.d.ts       | 199 ++++++--------
 .../runtime/core/components/index.js          |   5 +
 nuxt-vite.config.js                           |   7 +-
 51 files changed, 1571 insertions(+), 693 deletions(-)
 create mode 100644 components/lib/step/BaseStep.vue
 create mode 100644 components/lib/step/Step.d.ts
 create mode 100644 components/lib/step/Step.vue
 create mode 100644 components/lib/step/package.json
 create mode 100644 components/lib/step/style/StepStyle.d.ts
 create mode 100644 components/lib/step/style/StepStyle.js
 create mode 100644 components/lib/step/style/package.json
 create mode 100644 components/lib/stepitem/BaseStepItem.vue
 create mode 100644 components/lib/stepitem/StepItem.d.ts
 create mode 100644 components/lib/stepitem/StepItem.vue
 create mode 100644 components/lib/stepitem/package.json
 create mode 100644 components/lib/stepitem/style/StepItemStyle.d.ts
 create mode 100644 components/lib/stepitem/style/StepItemStyle.js
 create mode 100644 components/lib/stepitem/style/package.json
 create mode 100644 components/lib/steplist/BaseStepList.vue
 create mode 100644 components/lib/steplist/StepList.d.ts
 create mode 100644 components/lib/steplist/StepList.vue
 create mode 100644 components/lib/steplist/package.json
 create mode 100644 components/lib/steplist/style/StepListStyle.d.ts
 create mode 100644 components/lib/steplist/style/StepListStyle.js
 create mode 100644 components/lib/steplist/style/package.json
 create mode 100644 components/lib/steppanel/BaseStepPanel.vue
 create mode 100644 components/lib/steppanel/StepPanel.d.ts
 create mode 100644 components/lib/steppanel/StepPanel.vue
 create mode 100644 components/lib/steppanel/package.json
 create mode 100644 components/lib/steppanel/style/StepPanelStyle.d.ts
 create mode 100644 components/lib/steppanel/style/StepPanelStyle.js
 create mode 100644 components/lib/steppanel/style/package.json
 create mode 100644 components/lib/steppanels/BaseStepPanels.vue
 create mode 100644 components/lib/steppanels/StepPanels.d.ts
 create mode 100644 components/lib/steppanels/StepPanels.vue
 create mode 100644 components/lib/steppanels/package.json
 create mode 100644 components/lib/steppanels/style/StepPanelsStyle.d.ts
 create mode 100644 components/lib/steppanels/style/StepPanelsStyle.js
 create mode 100644 components/lib/steppanels/style/package.json
 delete mode 100644 components/lib/stepper/StepperContent.vue
 delete mode 100644 components/lib/stepper/StepperHeader.vue

diff --git a/components/lib/step/BaseStep.vue b/components/lib/step/BaseStep.vue
new file mode 100644
index 000000000..313368c79
--- /dev/null
+++ b/components/lib/step/BaseStep.vue
@@ -0,0 +1,34 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepStyle from 'primevue/step/style';
+
+export default {
+    name: 'BaseStep',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: [String, Number],
+            default: undefined
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        as: {
+            type: String,
+            default: 'DIV'
+        }
+    },
+    style: StepStyle,
+    provide() {
+        return {
+            $pcStep: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/step/Step.d.ts b/components/lib/step/Step.d.ts
new file mode 100644
index 000000000..f164f2baa
--- /dev/null
+++ b/components/lib/step/Step.d.ts
@@ -0,0 +1,187 @@
+/**
+ *
+ * Step is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module step
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type StepPassThroughOptionType = StepPassThroughAttributes | ((options: StepPassThroughMethodOptions) => StepPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: StepProps;
+    /**
+     * Defines current options.
+     */
+    context: StepContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepProps.pt}
+ */
+export interface StepPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: StepPassThroughOptionType;
+    /**
+     * Used to pass attributes to the number's DOM element.
+     */
+    number?: StepPassThroughOptionType;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: StepPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface StepPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Step component.
+ */
+export interface StepProps {
+    /**
+     * Value of step.
+     */
+    value?: string | number | undefined;
+    /**
+     * Whether the step is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Use to change the HTML tag of root element.
+     * @defaultValue BUTTON
+     */
+    as?: string | undefined;
+    /**
+     * When enabled, it changes the default rendered element for the one passed as a child element.
+     * @defaultValue false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepPassThroughOptions}
+     */
+    pt?: PassThrough<StepPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current options in Step component.
+ */
+export interface StepContext {
+    /**
+     * Whether the step is active.
+     */
+    active: boolean;
+    /**
+     * Whether the step is disabled.
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid slots in Step slots.
+ */
+export interface StepSlots {
+    /**
+     * Custom content template. Slot attributes can be used when asChild prop is true.
+     */
+    default(scope: {
+        /**
+         * Style class of the loader.
+         */
+        class: string;
+        /**
+         * Whether the step is active.
+         */
+        active: boolean;
+        /**
+         * Value of step.
+         */
+        value: string | number;
+        /**
+         * A11t attributes
+         */
+        a11yAttrs: any;
+        /**
+         * Click function.
+         */
+        activateCallback: () => void;
+    }): VNode[];
+}
+
+export interface StepEmitsOptions {}
+
+export declare type StepEmits = EmitFn<StepEmitsOptions>;
+
+/**
+ * **PrimeVue - Step**
+ *
+ * _Step is a helper component for Stepper component._
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Step: DefineComponent<StepProps, StepSlots, StepEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Step: GlobalComponentConstructor<StepProps, StepSlots, StepEmits>;
+    }
+}
+
+export default Step;
diff --git a/components/lib/step/Step.vue b/components/lib/step/Step.vue
new file mode 100644
index 000000000..1cd87a07a
--- /dev/null
+++ b/components/lib/step/Step.vue
@@ -0,0 +1,98 @@
+<template>
+    <component v-if="!asChild" :is="as" :class="cx('root')" :aria-current="active ? 'step' : undefined" role="presentation" :data-p-active="active" :data-p-disabled="disabled" v-bind="getPTOptions('root')">
+        <button :id="id" :class="cx('header')" role="tab" type="button" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" :disabled="disabled" @click="onStepClick" v-bind="getPTOptions('header')">
+            <span :class="cx('number')" v-bind="getPTOptions('number')">{{ activeValue }}</span>
+            <span :class="cx('title')" v-bind="getPTOptions('title')">
+                <slot />
+            </span>
+        </button>
+        <StepperSeparator v-if="isSeparatorVisible" />
+    </component>
+    <slot v-else :class="cx('root')" :active="active" :value="value" :a11yAttrs="a11yAttrs" :activateCallback="onStepClick" />
+</template>
+
+<script>
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+import StepperSeparator from '../stepper/StepperSeparator.vue';
+import BaseStep from './BaseStep.vue';
+
+export default {
+    name: 'Step',
+    extends: BaseStep,
+    inheritAttrs: false,
+    inject: {
+        $pcStepper: { default: null },
+        $pcStepList: { default: null },
+        $pcStepItem: { default: null }
+    },
+    data() {
+        return {
+            isSeparatorVisible: false
+        };
+    },
+    mounted() {
+        if (this.$el && this.$pcStepList) {
+            let index = ObjectUtils.findIndexInList(this.$el, DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]'));
+            let stepLen = DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]').length;
+
+            this.isSeparatorVisible = index !== stepLen - 1;
+        }
+    },
+    methods: {
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    active: this.active,
+                    disabled: this.disabled
+                }
+            });
+        },
+        isStepDisabled() {
+            return this.$pcStepper.isStepDisabled();
+        },
+        onStepClick() {
+            this.$pcStepper.updateValue(this.activeValue);
+        }
+    },
+    computed: {
+        active() {
+            return this.$pcStepper.isStepActive(this.activeValue);
+        },
+        activeValue() {
+            return !!this.$pcStepItem ? this.$pcStepItem?.value : this.value;
+        },
+        id() {
+            return `${this.$pcStepper?.id}_step_${this.activeValue}`;
+        },
+        ariaControls() {
+            return `${this.$pcStepper?.id}_steppanel_${this.activeValue}`;
+        },
+        a11yAttrs() {
+            return {
+                root: {
+                    role: 'presentation',
+                    'aria-current': this.active ? 'step' : undefined,
+                    'data-pc-name': 'step',
+                    'data-pc-section': 'root',
+                    'data-p-disabled': this.disabled,
+                    'data-p-active': this.active
+                },
+                header: {
+                    id: this.id,
+                    role: 'tab',
+                    taindex: this.disabled ? -1 : undefined,
+                    'aria-controls': this.ariaControls,
+                    'data-pc-section': 'header',
+                    disabled: this.disabled,
+                    onClick: this.onStepClick
+                }
+            };
+        }
+    },
+    components: {
+        StepperSeparator
+    }
+};
+</script>
diff --git a/components/lib/step/package.json b/components/lib/step/package.json
new file mode 100644
index 000000000..889ffe7bd
--- /dev/null
+++ b/components/lib/step/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./step.mjs",
+    "module": "./step.mjs",
+    "types": "./Step.d.ts",
+    "browser": {
+        "./sfc": "./Step.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/components/lib/step/style/StepStyle.d.ts b/components/lib/step/style/StepStyle.d.ts
new file mode 100644
index 000000000..36da74349
--- /dev/null
+++ b/components/lib/step/style/StepStyle.d.ts
@@ -0,0 +1,31 @@
+/**
+ *
+ * Step is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module stepstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-step',
+    /**
+     * Class name of the header element
+     */
+    header = 'p-step-header',
+    /**
+     * Class name of the number element
+     */
+    number = 'p-step-number',
+    /**
+     * Class name of the title element
+     */
+    title = 'p-step-title'
+}
+
+export interface StepStyle extends BaseStyle {}
diff --git a/components/lib/step/style/StepStyle.js b/components/lib/step/style/StepStyle.js
new file mode 100644
index 000000000..7bd4cac18
--- /dev/null
+++ b/components/lib/step/style/StepStyle.js
@@ -0,0 +1,19 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-step',
+        {
+            'p-step-active': instance.active,
+            'p-disabled': instance.isStepDisabled() || props.disabled
+        }
+    ],
+    header: 'p-step-header',
+    number: 'p-step-number',
+    title: 'p-step-title'
+};
+
+export default BaseStyle.extend({
+    name: 'step',
+    classes
+});
diff --git a/components/lib/step/style/package.json b/components/lib/step/style/package.json
new file mode 100644
index 000000000..bb4bf5fcd
--- /dev/null
+++ b/components/lib/step/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./stepstyle.mjs",
+    "module": "./stepstyle.mjs",
+    "types": "./StepStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/stepitem/BaseStepItem.vue b/components/lib/stepitem/BaseStepItem.vue
new file mode 100644
index 000000000..5ec215733
--- /dev/null
+++ b/components/lib/stepitem/BaseStepItem.vue
@@ -0,0 +1,22 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepItemStyle from 'primevue/stepitem/style';
+
+export default {
+    name: 'BaseStepItem',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: String,
+            default: undefined
+        }
+    },
+    style: StepItemStyle,
+    provide() {
+        return {
+            $pcStepItem: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/stepitem/StepItem.d.ts b/components/lib/stepitem/StepItem.d.ts
new file mode 100644
index 000000000..4c66daeaf
--- /dev/null
+++ b/components/lib/stepitem/StepItem.d.ts
@@ -0,0 +1,121 @@
+/**
+ *
+ * StepItem is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module stepitem
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type StepItemPassThroughOptionType = StepItemPassThroughAttributes | ((options: StepItemPassThroughMethodOptions) => StepItemPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepItemPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: StepItemProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepItemProps.pt}
+ */
+export interface StepItemPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepItemPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface StepItemPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in StepItem component.
+ */
+export interface StepItemProps {
+    /**
+     * Value of step.
+     */
+    value?: string | number | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepItemPassThroughOptions}
+     */
+    pt?: PassThrough<StepItemPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines valid slots in StepItem slots.
+ */
+export interface StepItemSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface StepItemEmitsOptions {}
+
+export declare type StepItemEmits = EmitFn<StepItemEmitsOptions>;
+
+/**
+ * **PrimeVue - StepItem**
+ *
+ * _StepItem is a helper component for Stepper component._
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const StepItem: DefineComponent<StepItemProps, StepItemSlots, StepItemEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        StepItem: GlobalComponentConstructor<StepItemProps, StepItemSlots, StepItemEmits>;
+    }
+}
+
+export default StepItem;
diff --git a/components/lib/stepitem/StepItem.vue b/components/lib/stepitem/StepItem.vue
new file mode 100644
index 000000000..a02dfa1a4
--- /dev/null
+++ b/components/lib/stepitem/StepItem.vue
@@ -0,0 +1,21 @@
+<template>
+    <div :class="cx('root')" :data-p-active="isActive" v-bind="ptmi('root')">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseStepItem from './BaseStepItem.vue';
+
+export default {
+    name: 'StepItem',
+    extends: BaseStepItem,
+    inheritAttrs: false,
+    inject: ['$pcStepper'],
+    computed: {
+        isActive() {
+            return this.$pcStepper?.d_value === this.value;
+        }
+    }
+};
+</script>
diff --git a/components/lib/stepitem/package.json b/components/lib/stepitem/package.json
new file mode 100644
index 000000000..13a00c151
--- /dev/null
+++ b/components/lib/stepitem/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./stepitem.mjs",
+    "module": "./stepitem.mjs",
+    "types": "./StepItem.d.ts",
+    "browser": {
+        "./sfc": "./StepItem.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/components/lib/stepitem/style/StepItemStyle.d.ts b/components/lib/stepitem/style/StepItemStyle.d.ts
new file mode 100644
index 000000000..a4e476cd5
--- /dev/null
+++ b/components/lib/stepitem/style/StepItemStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * StepItem is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module stepitemstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepItemClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-stepitem'
+}
+
+export interface StepItemStyle extends BaseStyle {}
diff --git a/components/lib/stepitem/style/StepItemStyle.js b/components/lib/stepitem/style/StepItemStyle.js
new file mode 100644
index 000000000..204913c75
--- /dev/null
+++ b/components/lib/stepitem/style/StepItemStyle.js
@@ -0,0 +1,15 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-stepitem',
+        {
+            'p-stepitem-active': instance.isActive
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'stepitem',
+    classes
+});
diff --git a/components/lib/stepitem/style/package.json b/components/lib/stepitem/style/package.json
new file mode 100644
index 000000000..9dc896030
--- /dev/null
+++ b/components/lib/stepitem/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./stepitemstyle.mjs",
+    "module": "./stepitemstyle.mjs",
+    "types": "./StepItemStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/steplist/BaseStepList.vue b/components/lib/steplist/BaseStepList.vue
new file mode 100644
index 000000000..8b71a8b56
--- /dev/null
+++ b/components/lib/steplist/BaseStepList.vue
@@ -0,0 +1,22 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepListStyle from 'primevue/steplist/style';
+
+export default {
+    name: 'BaseStepList',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: String,
+            default: undefined
+        }
+    },
+    style: StepListStyle,
+    provide() {
+        return {
+            $pcStepList: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/steplist/StepList.d.ts b/components/lib/steplist/StepList.d.ts
new file mode 100644
index 000000000..2de48b18f
--- /dev/null
+++ b/components/lib/steplist/StepList.d.ts
@@ -0,0 +1,121 @@
+/**
+ *
+ * StepList is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module steplist
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type StepListPassThroughOptionType = StepListPassThroughAttributes | ((options: StepListPassThroughMethodOptions) => StepListPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepListPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: StepListProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepListProps.pt}
+ */
+export interface StepListPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepListPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface StepListPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in StepList component.
+ */
+export interface StepListProps {
+    /**
+     * Value of step.
+     */
+    value: string;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepListPassThroughOptions}
+     */
+    pt?: PassThrough<StepListPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines valid slots in StepList slots.
+ */
+export interface StepListSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface StepListEmitsOptions {}
+
+export declare type StepListEmits = EmitFn<StepListEmitsOptions>;
+
+/**
+ * **PrimeVue - StepList**
+ *
+ * _StepList is a helper component for Stepper component._
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const StepList: DefineComponent<StepListProps, StepListSlots, StepListEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        StepList: GlobalComponentConstructor<StepListProps, StepListSlots, StepListEmits>;
+    }
+}
+
+export default StepList;
diff --git a/components/lib/steplist/StepList.vue b/components/lib/steplist/StepList.vue
new file mode 100644
index 000000000..e67133da4
--- /dev/null
+++ b/components/lib/steplist/StepList.vue
@@ -0,0 +1,15 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseStepList from './BaseStepList.vue';
+
+export default {
+    name: 'StepList',
+    extends: BaseStepList,
+    inheritAttrs: false
+};
+</script>
diff --git a/components/lib/steplist/package.json b/components/lib/steplist/package.json
new file mode 100644
index 000000000..3fd9218d5
--- /dev/null
+++ b/components/lib/steplist/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./steplist.mjs",
+    "module": "./steplist.mjs",
+    "types": "./StepList.d.ts",
+    "browser": {
+        "./sfc": "./StepList.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/components/lib/steplist/style/StepListStyle.d.ts b/components/lib/steplist/style/StepListStyle.d.ts
new file mode 100644
index 000000000..4779ff014
--- /dev/null
+++ b/components/lib/steplist/style/StepListStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * StepList is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module stepliststyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepListClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-steplist'
+}
+
+export interface StepListStyle extends BaseStyle {}
diff --git a/components/lib/steplist/style/StepListStyle.js b/components/lib/steplist/style/StepListStyle.js
new file mode 100644
index 000000000..c885f0461
--- /dev/null
+++ b/components/lib/steplist/style/StepListStyle.js
@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-steplist'
+};
+
+export default BaseStyle.extend({
+    name: 'steplist',
+    classes
+});
diff --git a/components/lib/steplist/style/package.json b/components/lib/steplist/style/package.json
new file mode 100644
index 000000000..c5e27601f
--- /dev/null
+++ b/components/lib/steplist/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./stepliststyle.mjs",
+    "module": "./stepliststyle.mjs",
+    "types": "./StepListStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/steppanel/BaseStepPanel.vue b/components/lib/steppanel/BaseStepPanel.vue
new file mode 100644
index 000000000..6cd065837
--- /dev/null
+++ b/components/lib/steppanel/BaseStepPanel.vue
@@ -0,0 +1,30 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepPanelStyle from 'primevue/steppanel/style';
+
+export default {
+    name: 'BaseStepPanel',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: [String, Number],
+            default: undefined
+        },
+        asChild: {
+            type: Boolean,
+            default: false
+        },
+        as: {
+            type: String,
+            default: 'DIV'
+        }
+    },
+    style: StepPanelStyle,
+    provide() {
+        return {
+            $pcStepPanel: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/steppanel/StepPanel.d.ts b/components/lib/steppanel/StepPanel.d.ts
new file mode 100644
index 000000000..7a5bf4341
--- /dev/null
+++ b/components/lib/steppanel/StepPanel.d.ts
@@ -0,0 +1,148 @@
+/**
+ *
+ * StepPanel is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module steppanel
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type StepPanelPassThroughOptionType = StepPanelPassThroughAttributes | ((options: StepPanelPassThroughMethodOptions) => StepPanelPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepPanelPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: StepPanelProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepPanelProps.pt}
+ */
+export interface StepPanelPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepPanelPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface StepPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in StepPanel component.
+ */
+export interface StepPanelProps {
+    /**
+     * Value of step.
+     */
+    value?: string | number | undefined;
+    /**
+     * Use to change the HTML tag of root element.
+     * @defaultValue BUTTON
+     */
+    as?: string | undefined;
+    /**
+     * When enabled, it changes the default rendered element for the one passed as a child element.
+     * @defaultValue false
+     */
+    asChild?: boolean | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepPanelPassThroughOptions}
+     */
+    pt?: PassThrough<StepPanelPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines valid slots in StepPanel slots.
+ */
+export interface StepPanelSlots {
+    /**
+     * Custom content template. Slot attributes can be used when asChild prop is true.
+     */
+    default(scope: {
+        /**
+         * Whether the step is active.
+         */
+        active: boolean;
+        /**
+         * Value of step.
+         */
+        value: string | number;
+        /**
+         * A11t attributes
+         */
+        a11yAttrs: any;
+        /**
+         * Click function.
+         */
+        activateCallback: () => void;
+    }): VNode[];
+}
+
+export interface StepPanelEmitsOptions {}
+
+export declare type StepPanelEmits = EmitFn<StepPanelEmitsOptions>;
+
+/**
+ * **PrimeVue - StepPanel**
+ *
+ * _StepPanel is a helper component for Stepper component._
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const StepPanel: DefineComponent<StepPanelProps, StepPanelSlots, StepPanelEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        StepPanel: GlobalComponentConstructor<StepPanelProps, StepPanelSlots, StepPanelEmits>;
+    }
+}
+
+export default StepPanel;
diff --git a/components/lib/steppanel/StepPanel.vue b/components/lib/steppanel/StepPanel.vue
new file mode 100644
index 000000000..312864c98
--- /dev/null
+++ b/components/lib/steppanel/StepPanel.vue
@@ -0,0 +1,99 @@
+<template>
+    <template v-if="isVertical">
+        <template v-if="!asChild">
+            <transition name="p-toggleable-content" v-bind="ptm('transition')">
+                <component v-show="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" v-bind="getPTOptions('root')">
+                    <StepperSeparator v-if="isSeparatorVisible" />
+                    <div :class="cx('content')" v-bind="getPTOptions('content')">
+                        <slot :active="active" :activateCallback="(val) => updateValue(val)" />
+                    </div>
+                </component>
+            </transition>
+        </template>
+        <slot v-else :active="active" :a11yAttrs="a11yAttrs" :activateCallback="(val) => updateValue(val)" />
+    </template>
+    <template v-else>
+        <template v-if="!asChild">
+            <component v-if="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" v-bind="getPTOptions('root')">
+                <slot :active="active" :activateCallback="(val) => updateValue(val)" />
+            </component>
+        </template>
+        <slot v-else-if="asChild && active" :active="active" :a11yAttrs="a11yAttrs" :activateCallback="(val) => updateValue(val)" />
+    </template>
+</template>
+
+<script>
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+import StepperSeparator from '../stepper/StepperSeparator.vue';
+import BaseStepPanel from './BaseStepPanel.vue';
+
+export default {
+    name: 'StepPanel',
+    extends: BaseStepPanel,
+    inheritAttrs: false,
+    inject: {
+        $pcStepper: { default: null },
+        $pcStepItem: { default: null },
+        $pcStepList: { default: null }
+    },
+    data() {
+        return {
+            isSeparatorVisible: false
+        };
+    },
+    mounted() {
+        if (this.$el) {
+            let stepElements = DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]');
+            let stepPanelEl = DomHandler.findSingle(this.isVertical ? this.$pcStepItem?.$el : this.$pcStepList?.$el, '[data-pc-name="step"]');
+            let stepPanelIndex = ObjectUtils.findIndexInList(stepPanelEl, stepElements);
+
+            this.isSeparatorVisible = this.isVertical && stepPanelIndex !== stepElements.length - 1;
+        }
+    },
+    methods: {
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    active: this.active
+                }
+            });
+        },
+        updateValue(val) {
+            this.$pcStepper.updateValue(val);
+        }
+    },
+    computed: {
+        active() {
+            let activeValue = !!this.$pcStepItem ? this.$pcStepItem?.value : this.value;
+
+            return activeValue === this.$pcStepper?.d_value;
+        },
+        isVertical() {
+            return !!this.$pcStepItem;
+        },
+        activeValue() {
+            return this.isVertical ? this.$pcStepItem?.value : this.value;
+        },
+        id() {
+            return `${this.$pcStepper?.id}_steppanel_${this.activeValue}`;
+        },
+        ariaControls() {
+            return `${this.$pcStepper?.id}_step_${this.activeValue}`;
+        },
+        a11yAttrs() {
+            return {
+                id: this.id,
+                role: 'tabpanel',
+                'aria-controls': this.ariaControls,
+                'data-pc-name': 'steppanel',
+                'data-p-active': this.active
+            };
+        }
+    },
+    components: {
+        StepperSeparator
+    }
+};
+</script>
diff --git a/components/lib/steppanel/package.json b/components/lib/steppanel/package.json
new file mode 100644
index 000000000..92a1d1093
--- /dev/null
+++ b/components/lib/steppanel/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./steppanel.mjs",
+    "module": "./steppanel.mjs",
+    "types": "./StepPanel.d.ts",
+    "browser": {
+        "./sfc": "./StepPanel.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/components/lib/steppanel/style/StepPanelStyle.d.ts b/components/lib/steppanel/style/StepPanelStyle.d.ts
new file mode 100644
index 000000000..7fecfc1c8
--- /dev/null
+++ b/components/lib/steppanel/style/StepPanelStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * StepPanel is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module steppanelstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepPanelClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-steppanel'
+}
+
+export interface StepPanelStyle extends BaseStyle {}
diff --git a/components/lib/steppanel/style/StepPanelStyle.js b/components/lib/steppanel/style/StepPanelStyle.js
new file mode 100644
index 000000000..2cddf8384
--- /dev/null
+++ b/components/lib/steppanel/style/StepPanelStyle.js
@@ -0,0 +1,16 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-steppanel',
+        {
+            'p-steppanel-active': instance.isVertical && instance.active
+        }
+    ],
+    content: 'p-steppanel-content'
+};
+
+export default BaseStyle.extend({
+    name: 'steppanel',
+    classes
+});
diff --git a/components/lib/steppanel/style/package.json b/components/lib/steppanel/style/package.json
new file mode 100644
index 000000000..a41306a2e
--- /dev/null
+++ b/components/lib/steppanel/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./steppanelstyle.mjs",
+    "module": "./steppanelstyle.mjs",
+    "types": "./StepPanelStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/steppanels/BaseStepPanels.vue b/components/lib/steppanels/BaseStepPanels.vue
new file mode 100644
index 000000000..5e3ff73cc
--- /dev/null
+++ b/components/lib/steppanels/BaseStepPanels.vue
@@ -0,0 +1,22 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import StepPanelsStyle from 'primevue/steppanels/style';
+
+export default {
+    name: 'BaseStepPanels',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: String,
+            default: undefined
+        }
+    },
+    style: StepPanelsStyle,
+    provide() {
+        return {
+            $pcStepPanels: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/steppanels/StepPanels.d.ts b/components/lib/steppanels/StepPanels.d.ts
new file mode 100644
index 000000000..e085fc812
--- /dev/null
+++ b/components/lib/steppanels/StepPanels.d.ts
@@ -0,0 +1,121 @@
+/**
+ *
+ * StepPanels is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module steppanels
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type StepPanelsPassThroughOptionType = StepPanelsPassThroughAttributes | ((options: StepPanelsPassThroughMethodOptions) => StepPanelsPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepPanelsPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: StepPanelsProps;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepPanelsProps.pt}
+ */
+export interface StepPanelsPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepPanelsPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface StepPanelsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in StepPanels component.
+ */
+export interface StepPanelsProps {
+    /**
+     * Value of step.
+     */
+    value: string;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepPanelsPassThroughOptions}
+     */
+    pt?: PassThrough<StepPanelsPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines valid slots in StepPanels slots.
+ */
+export interface StepPanelsSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+}
+
+export interface StepPanelsEmitsOptions {}
+
+export declare type StepPanelsEmits = EmitFn<StepPanelsEmitsOptions>;
+
+/**
+ * **PrimeVue - StepPanels**
+ *
+ * _StepPanels is a helper component for Stepper component._
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const StepPanels: DefineComponent<StepPanelsProps, StepPanelsSlots, StepPanelsEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        StepPanels: GlobalComponentConstructor<StepPanelsProps, StepPanelsSlots, StepPanelsEmits>;
+    }
+}
+
+export default StepPanels;
diff --git a/components/lib/steppanels/StepPanels.vue b/components/lib/steppanels/StepPanels.vue
new file mode 100644
index 000000000..0be949db1
--- /dev/null
+++ b/components/lib/steppanels/StepPanels.vue
@@ -0,0 +1,15 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseStepPanels from './BaseStepPanels.vue';
+
+export default {
+    name: 'StepPanels',
+    extends: BaseStepPanels,
+    inheritAttrs: false
+};
+</script>
diff --git a/components/lib/steppanels/package.json b/components/lib/steppanels/package.json
new file mode 100644
index 000000000..2f063f57e
--- /dev/null
+++ b/components/lib/steppanels/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./steppanels.mjs",
+    "module": "./steppanels.mjs",
+    "types": "./StepPanels.d.ts",
+    "browser": {
+        "./sfc": "./StepPanels.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/components/lib/steppanels/style/StepPanelsStyle.d.ts b/components/lib/steppanels/style/StepPanelsStyle.d.ts
new file mode 100644
index 000000000..7101d82a3
--- /dev/null
+++ b/components/lib/steppanels/style/StepPanelsStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * StepPanels
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module steppanelsstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepPanelsClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-steppanels'
+}
+
+export interface StepPanelsStyle extends BaseStyle {}
diff --git a/components/lib/steppanels/style/StepPanelsStyle.js b/components/lib/steppanels/style/StepPanelsStyle.js
new file mode 100644
index 000000000..1a13c986b
--- /dev/null
+++ b/components/lib/steppanels/style/StepPanelsStyle.js
@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-steppanels'
+};
+
+export default BaseStyle.extend({
+    name: 'steppanels',
+    classes
+});
diff --git a/components/lib/steppanels/style/package.json b/components/lib/steppanels/style/package.json
new file mode 100644
index 000000000..c327af15f
--- /dev/null
+++ b/components/lib/steppanels/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./steppanelsstyle.mjs",
+    "module": "./steppanelsstyle.mjs",
+    "types": "./StepPanelsStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/stepper/BaseStepper.vue b/components/lib/stepper/BaseStepper.vue
index 12968cb3f..4c090a472 100644
--- a/components/lib/stepper/BaseStepper.vue
+++ b/components/lib/stepper/BaseStepper.vue
@@ -6,13 +6,9 @@ export default {
     name: 'BaseStepper',
     extends: BaseComponent,
     props: {
-        activeStep: {
-            type: Number,
-            default: 0
-        },
-        orientation: {
-            type: String,
-            default: 'horizontal'
+        value: {
+            type: [String, Number],
+            default: undefined
         },
         linear: {
             type: Boolean,
diff --git a/components/lib/stepper/Stepper.d.ts b/components/lib/stepper/Stepper.d.ts
index 459fdeef6..50ee46c36 100644
--- a/components/lib/stepper/Stepper.d.ts
+++ b/components/lib/stepper/Stepper.d.ts
@@ -10,7 +10,6 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
-import { StepperPanelPassThroughOptionType } from '../stepperpanel';
 import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
@@ -54,18 +53,6 @@ export interface StepperPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: StepperPassThroughOptionType;
-    /**
-     * Used to pass attributes to the list's DOM element.
-     */
-    list?: StepperPassThroughOptionType;
-    /**
-     * Used to pass attributes to the panels' DOM element.
-     */
-    panels?: StepperPassThroughOptionType;
-    /**
-     * Used to pass attributes to the end handler's DOM element.
-     */
-    stepperpanel?: StepperPanelPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -85,44 +72,24 @@ export interface StepperPassThroughAttributes {
  */
 export interface StepperState {
     /**
-     * Current active index state.
+     * Current active value state.
      */
-    d_activeStep: number;
+    d_value: any;
     /**
      * Unique id for the Stepper component.
      */
     id: string;
 }
 
-/**
- * Custom tab change event.
- * @see {@link StepperEmitsOptions['step-change']}
- */
-export interface StepperChangeEvent {
-    /**
-     * Browser event
-     */
-    originalEvent: Event;
-    /**
-     * Index of the selected stepper panel
-     */
-    index: number;
-}
-
 /**
  * Defines valid properties in Stepper component.
  */
 export interface StepperProps {
     /**
-     * Active step index of stepper.
-     * @defaultValue 0
+     * Active value of stepper.
+     * @defaultValue null
      */
-    activeStep?: number | undefined;
-    /**
-     * Orientation of the stepper.
-     * @defaultValue horizontal
-     */
-    orientation?: 'horizontal' | 'vertical' | undefined;
+    value?: string | number | undefined;
     /**
      * Whether the steps are clickable or not.
      * @defaultValue false
@@ -153,6 +120,10 @@ export interface StepperProps {
  * Defines valid slots in Stepper component.
  */
 export interface StepperSlots {
+    /**
+     * Custom default template.
+     */
+    default(): VNode[];
     /**
      * Custom start template.
      */
@@ -169,13 +140,9 @@ export interface StepperSlots {
 export interface StepperEmitsOptions {
     /**
      * Emitted when the value changes.
-     * @param {number | number[]} value - New value.
+     * @param {any} value - New value.
      */
-    'update:activeStep'(value: number): void;
-    /**
-     * Callback to invoke when an active panel is changed.
-     */
-    'step-change'(event: StepperChangeEvent): void;
+    'update:value'(value: any): void;
 }
 
 export declare type StepperEmits = EmitFn<StepperEmitsOptions>;
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index e8d50241a..2fd0a64a3 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -1,266 +1,50 @@
 <template>
     <div :class="cx('root')" role="tablist" v-bind="ptmi('root')">
         <slot v-if="$slots.start" name="start" />
-
-        <template v-if="orientation === 'horizontal'">
-            <ul ref="nav" :class="cx('list')" v-bind="ptm('list')">
-                <li
-                    v-for="(step, index) of stepperpanels"
-                    :key="getStepKey(step, index)"
-                    :class="cx('stepper.item', { step, index })"
-                    :aria-current="isStepActive(index) ? 'step' : undefined"
-                    role="presentation"
-                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'item', index) }"
-                    data-pc-name="stepperpanel"
-                    :data-p-active="isStepActive(index)"
-                    :data-p-disabled="isItemDisabled(index)"
-                    :data-pc-index="index"
-                >
-                    <slot name="header">
-                        <StepperHeader
-                            :id="getStepHeaderActionId(index)"
-                            :template="step.children?.header"
-                            :stepperpanel="step"
-                            :index="index"
-                            :disabled="isItemDisabled(index)"
-                            :active="isStepActive(index)"
-                            :highlighted="index < d_activeStep"
-                            :class="cx('stepper.itemHeader')"
-                            :aria-controls="getStepContentId(index)"
-                            :clickCallback="(event) => onItemClick(event, index)"
-                            :getStepPT="getStepPT"
-                            :getStepProp="getStepProp"
-                            :unstyled="unstyled"
-                        />
-                    </slot>
-                    <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                        <StepperSeparator
-                            :template="step.children?.separator"
-                            :separatorClass="cx('stepper.separator')"
-                            :stepperpanel="step"
-                            :index="index"
-                            :active="isStepActive(index)"
-                            :highlighted="index < d_activeStep"
-                            :getStepPT="getStepPT(step, 'separator', index)"
-                            :unstyled="unstyled"
-                        />
-                    </slot>
-                </li>
-            </ul>
-            <div :class="cx('panels')" v-bind="ptm('panels')">
-                <template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
-                    <StepperContent
-                        v-show="isStepActive(index)"
-                        :id="getStepContentId(index)"
-                        :template="step?.children?.content"
-                        :stepperpanel="step"
-                        :index="index"
-                        :active="isStepActive(index)"
-                        :highlighted="index < d_activeStep"
-                        :clickCallback="(event) => onItemClick(event, index)"
-                        :prevCallback="(event) => prevCallback(event, index)"
-                        :nextCallback="(event) => nextCallback(event, index)"
-                        :getStepPT="getStepPT"
-                        :aria-labelledby="getStepHeaderActionId(index)"
-                        :unstyled="unstyled"
-                    />
-                </template>
-            </div>
-        </template>
-        <template v-else-if="orientation === 'vertical'">
-            <div
-                v-for="(step, index) of stepperpanels"
-                ref="nav"
-                :key="getStepKey(step, index)"
-                :class="cx('panel', { step, index })"
-                :aria-current="isStepActive(index) ? 'step' : undefined"
-                v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'panel', index) }"
-                data-pc-name="stepperpanel"
-                :data-p-active="isStepActive(index)"
-                :data-p-disabled="isItemDisabled(index)"
-                :data-pc-index="index"
-            >
-                <div :class="cx('stepper.item', { step, index })" v-bind="getStepPT(step, 'item', index)">
-                    <slot name="header">
-                        <StepperHeader
-                            :id="getStepHeaderActionId(index)"
-                            :template="step.children?.header"
-                            :stepperpanel="step"
-                            :index="index"
-                            :disabled="isItemDisabled(index)"
-                            :active="isStepActive(index)"
-                            :highlighted="index < d_activeStep"
-                            :class="cx('stepper.itemHeader')"
-                            :aria-controls="getStepContentId(index)"
-                            :clickCallback="(event) => onItemClick(event, index)"
-                            :getStepPT="getStepPT"
-                            :getStepProp="getStepProp"
-                        />
-                    </slot>
-                </div>
-
-                <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
-                    <div v-show="isStepActive(index)" :class="cx('stepper.panelContentContainer')" v-bind="getStepPT(step, 'panelContentContainer', index)">
-                        <slot v-if="index !== stepperpanels.length - 1" name="separator">
-                            <StepperSeparator
-                                :template="step.children?.separator"
-                                :separatorClass="cx('stepper.separator')"
-                                :stepperpanel="step"
-                                :index="index"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :getStepPT="getStepPT(step, 'separator', index)"
-                            />
-                        </slot>
-                        <slot name="content">
-                            <StepperContent
-                                :id="getStepContentId(index)"
-                                :template="step?.children?.content"
-                                :stepperpanel="step"
-                                :index="index"
-                                :active="isStepActive(index)"
-                                :highlighted="index < d_activeStep"
-                                :clickCallback="(event) => onItemClick(event, index)"
-                                :prevCallback="(event) => prevCallback(event, index)"
-                                :nextCallback="(event) => nextCallback(event, index)"
-                                :getStepPT="getStepPT"
-                                :aria-labelledby="getStepHeaderActionId(index)"
-                            />
-                        </slot>
-                    </div>
-                </transition>
-            </div>
-        </template>
+        <slot />
         <slot v-if="$slots.end" name="end" />
     </div>
 </template>
 
 <script>
 import { UniqueComponentId } from 'primevue/utils';
-import { mergeProps } from 'vue';
 import BaseStepper from './BaseStepper.vue';
-import StepperContent from './StepperContent.vue';
-import StepperHeader from './StepperHeader.vue';
-import StepperSeparator from './StepperSeparator.vue';
 
 export default {
     name: 'Stepper',
     extends: BaseStepper,
     inheritAttrs: false,
-    emits: ['update:activeStep', 'step-change'],
+    emits: ['update:value'],
     data() {
         return {
             id: this.$attrs.id,
-            d_activeStep: this.activeStep
+            d_value: this.value
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
+        '$attrs.id'(newValue) {
             this.id = newValue || UniqueComponentId();
         },
-        activeStep(newValue) {
-            this.d_activeStep = newValue;
+        value(newValue) {
+            this.d_value = newValue;
         }
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
     },
     methods: {
-        isStep(child) {
-            return child.type.name === 'StepperPanel';
-        },
-        isStepActive(index) {
-            return this.d_activeStep === index;
-        },
-        getStepProp(step, name) {
-            return step.props ? step.props[name] : undefined;
-        },
-        getStepKey(step, index) {
-            return this.getStepProp(step, 'header') || index;
-        },
-        getStepHeaderActionId(index) {
-            return `${this.id}_${index}_header_action`;
-        },
-        getStepContentId(index) {
-            return `${this.id}_${index}_content`;
-        },
-        getStepPT(step, key, index) {
-            const count = this.stepperpanels.length;
-            const stepMetaData = {
-                props: step.props,
-                parent: {
-                    instance: this,
-                    props: this.$props,
-                    state: this.$data
-                },
-                context: {
-                    index,
-                    count,
-                    first: index === 0,
-                    last: index === count - 1,
-                    active: this.isStepActive(index),
-                    highlighted: index < this.d_activeStep,
-                    disabled: this.isItemDisabled(index)
-                }
-            };
-
-            return mergeProps(this.ptm(`stepperpanel.${key}`, { stepperpanel: stepMetaData }), this.ptm(`stepperpanel.${key}`, stepMetaData), this.ptmo(this.getStepProp(step, 'pt'), key, stepMetaData));
-        },
-        updateActiveStep(event, index) {
-            this.d_activeStep = index;
-
-            this.$emit('update:activeStep', index);
-            this.$emit('step-change', {
-                originalEvent: event,
-                index
-            });
-        },
-        onItemClick(event, index) {
-            if (this.linear) {
-                event.preventDefault();
-
-                return;
-            }
-
-            if (index !== this.d_activeStep) {
-                this.updateActiveStep(event, index);
+        updateValue(newValue) {
+            if (this.d_value !== newValue) {
+                this.d_value = newValue;
+                this.$emit('update:value', newValue);
             }
         },
-        isItemDisabled(index) {
-            return this.linear && !this.isStepActive(index);
+        isStepActive(value) {
+            return this.d_value === value;
         },
-        prevCallback(event, index) {
-            if (index !== 0) {
-                this.updateActiveStep(event, index - 1);
-            }
-        },
-        nextCallback(event, index) {
-            if (index !== this.stepperpanels.length - 1) {
-                this.updateActiveStep(event, index + 1);
-            }
+        isStepDisabled() {
+            return this.linear;
         }
-    },
-    computed: {
-        stepperpanels() {
-            return this.$slots.default().reduce((stepperpanels, child) => {
-                if (this.isStep(child)) {
-                    stepperpanels.push(child);
-                } else if (child.children && child.children instanceof Array) {
-                    child.children.forEach((nestedChild) => {
-                        if (this.isStep(nestedChild)) {
-                            stepperpanels.push(nestedChild);
-                        }
-                    });
-                }
-
-                return stepperpanels;
-            }, []);
-        }
-    },
-    components: {
-        StepperContent,
-        StepperHeader,
-        StepperSeparator
     }
 };
 </script>
diff --git a/components/lib/stepper/StepperContent.vue b/components/lib/stepper/StepperContent.vue
deleted file mode 100644
index 6ef36c5fe..000000000
--- a/components/lib/stepper/StepperContent.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <div
-        :id="id"
-        :class="cx('stepper.panelContent', { stepperpanel, index })"
-        role="tabpanel"
-        :aria-labelledby="ariaLabelledby"
-        v-bind="{ ...getStepPT(stepperpanel, 'root', index), ...getStepPT(stepperpanel, 'panelContent', index) }"
-        data-pc-name="stepperpanel"
-        :data-pc-index="index"
-        :data-p-active="active"
-    >
-        <component
-            v-if="template"
-            :is="template"
-            :index="index"
-            :active="active"
-            :highlighted="highlighted"
-            :clickCallback="(event) => onItemClick(event, index)"
-            :prevCallback="(event) => prevCallback(event, index)"
-            :nextCallback="(event) => nextCallback(event, index)"
-        ></component>
-        <component v-else :is="stepperpanel"></component>
-    </div>
-</template>
-
-<script>
-import BaseComponent from 'primevue/basecomponent';
-
-export default {
-    name: 'StepperContent',
-    hostName: 'Stepper',
-    extends: BaseComponent,
-    props: {
-        id: null,
-        template: null,
-        ariaLabelledby: null,
-        stepperpanel: null,
-        index: null,
-        active: null,
-        highlighted: null,
-        clickCallback: null,
-        prevCallback: null,
-        nextCallback: null,
-        getStepPT: null
-    }
-};
-</script>
diff --git a/components/lib/stepper/StepperHeader.vue b/components/lib/stepper/StepperHeader.vue
deleted file mode 100644
index 39ccd4800..000000000
--- a/components/lib/stepper/StepperHeader.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <component
-        v-if="template"
-        :is="template"
-        :index="index"
-        :active="active"
-        :highlighted="highlighted"
-        :class="cx('stepper.itemHeader')"
-        :headerClass="cx('stepper.itemHeader')"
-        :numberClass="cx('stepper.itemNumber')"
-        :titleClass="cx('stepper.itemTitle')"
-        :clickCallback="(event) => clickCallback(event, index)"
-    />
-    <button v-else :id="id" :class="cx('stepper.itemHeader')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'itemHeader', index)">
-        <span :class="cx('stepper.itemNumber')" v-bind="getStepPT(stepperpanel, 'itemNumber', index)">{{ index + 1 }}</span>
-        <span :class="cx('stepper.itemTitle')" v-bind="getStepPT(stepperpanel, 'itemTitle', index)">{{ getStepProp(stepperpanel, 'header') }}</span>
-    </button>
-</template>
-
-<script>
-import BaseComponent from 'primevue/basecomponent';
-
-export default {
-    name: 'StepperHeader',
-    hostName: 'Stepper',
-    extends: BaseComponent,
-    props: {
-        id: null,
-        template: null,
-        stepperpanel: null,
-        index: null,
-        disabled: null,
-        active: null,
-        highlighted: null,
-        ariaControls: null,
-        clickCallback: null,
-        getStepPT: null,
-        getStepProp: null
-    }
-};
-</script>
diff --git a/components/lib/stepper/StepperSeparator.vue b/components/lib/stepper/StepperSeparator.vue
index e071b1bec..bb1ded267 100644
--- a/components/lib/stepper/StepperSeparator.vue
+++ b/components/lib/stepper/StepperSeparator.vue
@@ -1,6 +1,5 @@
 <template>
-    <component v-if="template" :is="template" :class="separatorClass" :index="index" :active="active" :highlighted="highlighted" />
-    <span v-else :class="separatorClass" aria-hidden="true" v-bind="getStepPT" />
+    <span :class="cx('separator')" v-bind="ptm('separator')" />
 </template>
 
 <script>
@@ -9,15 +8,6 @@ import BaseComponent from 'primevue/basecomponent';
 export default {
     name: 'StepperSeparator',
     hostName: 'Stepper',
-    extends: BaseComponent,
-    props: {
-        template: null,
-        separatorClass: null,
-        stepperpanel: null,
-        index: null,
-        active: null,
-        highlighted: null,
-        getStepPT: null
-    }
+    extends: BaseComponent
 };
 </script>
diff --git a/components/lib/stepper/style/StepperStyle.d.ts b/components/lib/stepper/style/StepperStyle.d.ts
index a902718a6..342acd555 100644
--- a/components/lib/stepper/style/StepperStyle.d.ts
+++ b/components/lib/stepper/style/StepperStyle.d.ts
@@ -15,45 +15,9 @@ export enum StepperClasses {
      */
     root = 'p-stepper',
     /**
-     * Class name of the list element
+     * Class name of the separator element
      */
-    list = 'p-stepper-list',
-    /**
-     * Class name of the stepper item element
-     */
-    stepperItem = 'p-stepper-item',
-    /**
-     * Class name of the stepper item header element
-     */
-    stepperItemHeader = 'p-stepper-item-header',
-    /**
-     * Class name of the stepper item number element
-     */
-    stepperItemNumber = 'p-stepper-item-number',
-    /**
-     * Class name of the stepper item title element
-     */
-    stepperItemTitle = 'p-stepper-item-title',
-    /**
-     * Class name of the stepper separator element
-     */
-    stepperSeparator = 'p-stepper-separator',
-    /**
-     * Class name of the stepper panel content container element
-     */
-    stepperPanelContentContainer = 'p-stepper-panel-content-container',
-    /**
-     * Class name of the stepper panel content element
-     */
-    stepperPanelContent = 'p-stepper-panel-content',
-    /**
-     * Class name of the panels element
-     */
-    panels = 'p-stepper-panels',
-    /**
-     * Class name of the panel element
-     */
-    panel = 'p-stepper-panel'
+    separator = 'p-stepper-separator'
 }
 
 export interface StepperStyle extends BaseStyle {}
diff --git a/components/lib/stepper/style/StepperStyle.js b/components/lib/stepper/style/StepperStyle.js
index 113e8c5f8..80d95f6e9 100644
--- a/components/lib/stepper/style/StepperStyle.js
+++ b/components/lib/stepper/style/StepperStyle.js
@@ -1,7 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
-.p-stepper-list {
+.p-steplist {
     position: relative;
     display: flex;
     justify-content: space-between;
@@ -12,20 +12,20 @@ const theme = ({ dt }) => `
     overflow-x: auto;
 }
 
-.p-stepper-item {
+.p-step {
     position: relative;
     display: flex;
     flex: 1 1 auto;
     align-items: center;
-    gap: ${dt('stepper.item.gap')};
-    padding: ${dt('stepper.item.padding')};
+    gap: ${dt('stepper.step.gap')};
+    padding: ${dt('stepper.step.padding')};
 }
 
-.p-stepper-item:last-of-type {
+.p-step:last-of-type {
     flex: initial;
 }
 
-.p-stepper-item-header {
+.p-step-header {
     border: 0 none;
     display: inline-flex;
     align-items: center;
@@ -34,82 +34,86 @@ const theme = ({ dt }) => `
     transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, outline-color ${dt('stepper.transition.duration')}, box-shadow ${dt(
     'stepper.transition.duration'
 )};
-    border-radius: ${dt('stepper.item.header.border.radius')};
+    border-radius: ${dt('stepper.step.header.border.radius')};
     outline-color: transparent;
     background: transparent;
-    padding: ${dt('stepper.item.header.padding')};
-    gap: ${dt('stepper.item.header.gap')};
+    padding: ${dt('stepper.step.header.padding')};
+    gap: ${dt('stepper.step.header.gap')};
 }
 
-.p-stepper-item-header:focus-visible {
-    box-shadow: ${dt('stepper.item.header.focus.ring.shadow')};
-    outline: ${dt('stepper.item.header.focus.ring.width')} ${dt('stepper.item.header.focus.ring.style')} ${dt('stepper.item.header.focus.ring.color')};
-    outline-offset: ${dt('stepper.item.header.focus.ring.offset')};
+.p-step-header:focus-visible {
+    box-shadow: ${dt('stepper.step.header.focus.ring.shadow')};
+    outline: ${dt('stepper.step.header.focus.ring.width')} ${dt('stepper.step.header.focus.ring.style')} ${dt('stepper.step.header.focus.ring.color')};
+    outline-offset: ${dt('stepper.step.header.focus.ring.offset')};
 }
 
-.p-stepper.p-stepper-readonly .p-stepper-item {
+.p-stepper.p-stepper-readonly .p-step {
     cursor: auto;
 }
 
-.p-stepper-item-title {
+.p-step-title {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
-    color: ${dt('stepper.item.title.color')};
-    font-weight: ${dt('stepper.item.title.font.weight')};
+    color: ${dt('stepper.step.title.color')};
+    font-weight: ${dt('stepper.step.title.font.weight')};
     transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt(
     'stepper.transition.duration'
 )};
 }
 
-.p-stepper-item-number {
+.p-step-number {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${dt('stepper.item.number.color')};
-    border: 2px solid ${dt('stepper.item.number.border.color')};
-    background: ${dt('stepper.item.number.background')};
-    min-width: ${dt('stepper.item.number.size')};
-    height: ${dt('stepper.item.number.size')};
-    line-height: ${dt('stepper.item.number.size')};
-    font-size: ${dt('stepper.item.number.font.size')};
+    color: ${dt('stepper.step.number.color')};
+    border: 2px solid ${dt('stepper.step.number.border.color')};
+    background: ${dt('stepper.step.number.background')};
+    min-width: ${dt('stepper.step.number.size')};
+    height: ${dt('stepper.step.number.size')};
+    line-height: ${dt('stepper.step.number.size')};
+    font-size: ${dt('stepper.step.number.font.size')};
     z-index: 1;
-    border-radius: ${dt('stepper.item.number.border.radius')};
+    border-radius: ${dt('stepper.step.number.border.radius')};
     position: relative;
-    font-weight: ${dt('stepper.item.number.font.weight')};
+    font-weight: ${dt('stepper.step.number.font.weight')};
 }
 
-.p-stepper-item-number::after {
+.p-step-number::after {
     content: " ";
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: ${dt('stepper.item.number.border.radius')};
-    box-shadow: ${dt('stepper.item.number.shadow')};
+    border-radius: ${dt('stepper.step.number.border.radius')};
+    box-shadow: ${dt('stepper.step.number.shadow')};
 }
 
-.p-stepper-item-active .p-stepper-item-header {
+.p-step-active .p-step-header {
     cursor: default;
 }
 
-.p-stepper-item-active .p-stepper-item-number {
-    background: ${dt('stepper.item.number.active.background')};
-    border-color: ${dt('stepper.item.number.active.border.color')};
-    color: ${dt('stepper.item.number.active.color')};
+.p-step-active .p-step-number {
+    background: ${dt('stepper.step.number.active.background')};
+    border-color: ${dt('stepper.step.number.active.border.color')};
+    color: ${dt('stepper.step.number.active.color')};
 }
 
-.p-stepper-item-active .p-stepper-item-title {
-    color: ${dt('stepper.item.title.active.color')};
+.p-step-active .p-step-title {
+    color: ${dt('stepper.step.title.active.color')};
 }
 
-.p-stepper-item:not(.p-disabled):focus-visible {
+.p-step:not(.p-disabled):focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator {
+.p-step:has(~ .p-step-active) .p-stepper-separator {
+    background: ${dt('stepper.separator.active.background')};
+}
+
+.p-step:has(~ .p-step-active) .p-stepper-separator {
     background: ${dt('stepper.separator.active.background')};
 }
 
@@ -123,63 +127,59 @@ const theme = ({ dt }) => `
 )};
 }
 
-.p-stepper-panels {
-    padding: ${dt('stepper.panel.content.orientation.horizontal.padding')};
+.p-steppanels {
+    padding: ${dt('stepper.steppanels.padding')};
 }
 
-.p-stepper-panel-content {
-    background: ${dt('stepper.panel.content.background')};
-    color: ${dt('stepper.panel.content.color')};
+.p-steppanel {
+    background: ${dt('stepper.steppanel.content.background')};
+    color: ${dt('stepper.steppanel.content.color')};
 }
 
-.p-stepper-vertical .p-stepper-list {
-    flex-direction: column;
-}
-
-.p-stepper-vertical {
+.p-stepper:has(.p-stepitem) {
     display: flex;
     flex-direction: column;
 }
 
-.p-stepper-vertical .p-stepper-panel-content-container {
-    display: flex;
-    flex: 1 1 auto;
-}
-
-.p-stepper-vertical .p-stepper-panel {
+.p-stepitem {
     display: flex;
     flex-direction: column;
     flex: initial;
 }
 
-.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+.p-stepitem.p-stepitem-active {
     flex: 1 1 auto;
 }
 
-.p-stepper-vertical .p-stepper-panel .p-stepper-item {
+.p-stepitem .p-step {
     flex: initial;
 }
 
-.p-stepper-vertical .p-stepper-panel .p-stepper-panel-content {
+.p-stepitem .p-steppanel-content {
     width: 100%;
-    padding: ${dt('stepper.panel.content.orientation.vertical.padding')};
+    padding: ${dt('stepper.steppanel.padding')};
 }
 
-.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+.p-stepitem .p-steppanel {
+    display: flex;
+    flex: 1 1 auto;
+}
+
+.p-stepitem .p-stepper-separator {
     flex: 0 0 auto;
     width: ${dt('stepper.separator.size')};
     height: auto;
-    margin: ${dt('stepper.separator.orientation.vertical.margin')};
+    margin: ${dt('stepper.separator.margin')};
     position: relative;
-    left: calc(-1 * ${dt('stepper.separator.size')} / 2);
+    left: calc(-1 * ${dt('stepper.separator.size')});
 }
 
-.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
-    background: ${dt('stepper.connector.active.background')};
+.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
+    background: ${dt('stepper.separator.active.background')};
 }
 
-.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-panel-content {
-    padding: ${dt('stepper.panel.content.orientation.vertical.last.padding')};
+.p-stepitem:last-of-type .p-steppanel {
+    padding: ${dt('stepper.steppanel.last.padding')};
 }
 `;
 
@@ -187,34 +187,10 @@ const classes = {
     root: ({ props }) => [
         'p-stepper p-component',
         {
-            'p-stepper-horizontal': props.orientation === 'horizontal',
-            'p-stepper-vertical': props.orientation === 'vertical',
             'p-readonly': props.linear
         }
     ],
-    list: 'p-stepper-list',
-    stepper: {
-        item: ({ instance, step, index }) => [
-            'p-stepper-item',
-            {
-                'p-stepper-item-active': instance.isStepActive(index),
-                'p-disabled': instance.isItemDisabled(index)
-            }
-        ],
-        itemHeader: 'p-stepper-item-header',
-        itemNumber: 'p-stepper-item-number',
-        itemTitle: 'p-stepper-item-title',
-        separator: 'p-stepper-separator',
-        panelContentContainer: 'p-stepper-panel-content-container',
-        panelContent: 'p-stepper-panel-content'
-    },
-    panels: 'p-stepper-panels',
-    panel: ({ instance, props, index }) => [
-        'p-stepper-panel',
-        {
-            'p-stepper-panel-active': props.orientation === 'vertical' && instance.isStepActive(index)
-        }
-    ]
+    separator: 'p-stepper-separator'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/stepperpanel/StepperPanel.d.ts b/components/lib/stepperpanel/StepperPanel.d.ts
index 29f81f603..37bc70166 100644
--- a/components/lib/stepperpanel/StepperPanel.d.ts
+++ b/components/lib/stepperpanel/StepperPanel.d.ts
@@ -266,6 +266,8 @@ export interface StepperPanelEmitsOptions {}
 export declare type StepperPanelEmits = EmitFn<StepperPanelEmitsOptions>;
 
 /**
+ * @deprecated since v4. Use the new structure of Stepper instead.
+ *
  * **PrimeVue - StepperPanel**
  *
  * _StepperPanel is a helper component for Stepper component._
diff --git a/components/lib/stepperpanel/StepperPanel.vue b/components/lib/stepperpanel/StepperPanel.vue
index 47865642f..e586bccec 100644
--- a/components/lib/stepperpanel/StepperPanel.vue
+++ b/components/lib/stepperpanel/StepperPanel.vue
@@ -7,6 +7,9 @@ import BaseStepperPanel from './BaseStepperPanel.vue';
 
 export default {
     name: 'StepperPanel',
-    extends: BaseStepperPanel
+    extends: BaseStepperPanel,
+    mounted() {
+        console.warn('Deprecated since v4. Use the new structure of Stepper instead.');
+    }
 };
 </script>
diff --git a/components/lib/themes/aura/stepper/index.js b/components/lib/themes/aura/stepper/index.js
index a907a45e6..c8af64c00 100644
--- a/components/lib/themes/aura/stepper/index.js
+++ b/components/lib/themes/aura/stepper/index.js
@@ -5,18 +5,14 @@ export default {
     separator: {
         background: '{content.border.color}',
         activeBackground: '{primary.color}',
-        orientation: {
-            vertical: {
-                margin: '0 0 0 1.625rem'
-            }
-        },
+        margin: '0 0 0 1.625rem',
         size: '2px'
     },
-    item: {
+    step: {
         padding: '0.5rem',
         gap: '1rem'
     },
-    itemHeader: {
+    stepHeader: {
         padding: '0',
         borderRadius: '{content.border.radius}',
         focusRing: {
@@ -28,12 +24,12 @@ export default {
         },
         gap: '0.5rem'
     },
-    itemTitle: {
+    stepTitle: {
         color: '{text.muted.color}',
         activeColor: '{primary.color}',
         fontWeight: '500'
     },
-    itemNumber: {
+    stepNumber: {
         background: '{content.background}',
         activeBackground: '{content.background}',
         borderColor: '{content.border.color}',
@@ -46,22 +42,15 @@ export default {
         borderRadius: '50%',
         shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
     },
-    verticalPanelContainer: {
-        paddingLeft: '1rem'
+    steppanels: {
+        padding: '0.875rem 0.5rem 1.125rem 0.5rem'
     },
-    panelContent: {
+    steppanel: {
         background: '{content.background}',
         color: '{content.color}',
-        orientation: {
-            horizontal: {
-                padding: '0.875rem 0.5rem 1.125rem 0.5rem'
-            },
-            vertical: {
-                padding: '0 0 0 1rem',
-                last: {
-                    padding: '0 0 0 3rem'
-                }
-            }
+        padding: '0 0 0 1rem',
+        last: {
+            padding: '0 0 0 1.625rem'
         }
     }
 };
diff --git a/components/lib/themes/lara/stepper/index.js b/components/lib/themes/lara/stepper/index.js
index 07e53819b..7f5adf697 100644
--- a/components/lib/themes/lara/stepper/index.js
+++ b/components/lib/themes/lara/stepper/index.js
@@ -5,18 +5,14 @@ export default {
     separator: {
         background: '{content.border.color}',
         activeBackground: '{primary.color}',
-        orientation: {
-            vertical: {
-                margin: '0 0 0 1.625rem'
-            }
-        },
+        margin: '0 0 0 1.625rem',
         size: '2px'
     },
-    item: {
+    step: {
         padding: '0.5rem',
         gap: '1rem'
     },
-    itemHeader: {
+    stepHeader: {
         padding: '0',
         borderRadius: '{content.border.radius}',
         focusRing: {
@@ -28,12 +24,12 @@ export default {
         },
         gap: '0.5rem'
     },
-    itemTitle: {
+    stepTitle: {
         color: '{text.muted.color}',
         activeColor: '{primary.color}',
         fontWeight: '500'
     },
-    itemNumber: {
+    stepNumber: {
         background: '{content.background}',
         activeBackground: '{primary.color}',
         borderColor: '{content.border.color}',
@@ -46,22 +42,15 @@ export default {
         borderRadius: '50%',
         shadow: 'none'
     },
-    verticalPanelContainer: {
-        paddingLeft: '1rem'
+    steppanels: {
+        padding: '0.875rem 0.5rem 1.125rem 0.5rem'
     },
-    panelContent: {
+    steppanel: {
         background: '{content.background}',
         color: '{content.color}',
-        orientation: {
-            horizontal: {
-                padding: '0.875rem 0.5rem 1.125rem 0.5rem'
-            },
-            vertical: {
-                padding: '0 0 0 1rem',
-                last: {
-                    padding: '0 0 0 3rem'
-                }
-            }
+        padding: '0 0 0 1rem',
+        last: {
+            padding: '0 0 0 1.625rem'
         }
     }
 };
diff --git a/components/lib/themes/nora/stepper/index.js b/components/lib/themes/nora/stepper/index.js
index 11e4af71e..bfcffb021 100644
--- a/components/lib/themes/nora/stepper/index.js
+++ b/components/lib/themes/nora/stepper/index.js
@@ -5,18 +5,14 @@ export default {
     separator: {
         background: '{content.border.color}',
         activeBackground: '{primary.color}',
-        orientation: {
-            vertical: {
-                margin: '0 0 0 1.625rem'
-            }
-        },
+        margin: '0 0 0 1.625rem',
         size: '2px'
     },
-    item: {
+    step: {
         padding: '0.5rem',
         gap: '1rem'
     },
-    itemHeader: {
+    stepHeader: {
         padding: '0',
         borderRadius: '{content.border.radius}',
         focusRing: {
@@ -28,12 +24,12 @@ export default {
         },
         gap: '0.5rem'
     },
-    itemTitle: {
+    stepTitle: {
         color: '{text.muted.color}',
         activeColor: '{primary.color}',
         fontWeight: '700'
     },
-    itemNumber: {
+    stepNumber: {
         background: '{content.background}',
         activeBackground: '{primary.color}',
         borderColor: '{content.border.color}',
@@ -46,22 +42,15 @@ export default {
         borderRadius: '50%',
         shadow: 'none'
     },
-    verticalPanelContainer: {
-        paddingLeft: '1rem'
+    steppanels: {
+        padding: '0.875rem 0.5rem 1.125rem 0.5rem'
     },
-    panelContent: {
+    steppanel: {
         background: '{content.background}',
         color: '{content.color}',
-        orientation: {
-            horizontal: {
-                padding: '0.875rem 0.5rem 1.125rem 0.5rem'
-            },
-            vertical: {
-                padding: '0 0 0 1rem',
-                last: {
-                    padding: '0 0 0 3rem'
-                }
-            }
+        padding: '0 0 0 1rem',
+        last: {
+            padding: '0 0 0 1.625rem'
         }
     }
 };
diff --git a/components/lib/themes/types/stepper/index.d.ts b/components/lib/themes/types/stepper/index.d.ts
index f141475d3..0bf63908a 100644
--- a/components/lib/themes/types/stepper/index.d.ts
+++ b/components/lib/themes/types/stepper/index.d.ts
@@ -39,21 +39,11 @@ export interface StepperDesignTokens extends ColorSchemeDesignToken<StepperDesig
          */
         activeBackground?: string;
         /**
-         * Orientation of separator
+         * Margin of separator
+         *
+         * @designToken stepper.separator.margin
          */
-        orientation?: {
-            /**
-             * Orientation vertical of separator
-             */
-            vertical?: {
-                /**
-                 * Orientation vertical margin of separator
-                 *
-                 * @designToken stepper.separator.orientation.vertical.margin
-                 */
-                margin?: string;
-            };
-        };
+        margin?: string;
         /**
          * Size of separator
          *
@@ -62,238 +52,217 @@ export interface StepperDesignTokens extends ColorSchemeDesignToken<StepperDesig
         size?: string;
     };
     /**
-     * Used to pass tokens of the item section
+     * Used to pass tokens of the step section
      */
-    item?: {
+    step?: {
         /**
-         * Padding of item
+         * Padding of step
          *
-         * @designToken stepper.item.padding
+         * @designToken stepper.step.padding
          */
         padding?: string;
         /**
-         * Gap of item
+         * Gap of step
          *
-         * @designToken stepper.item.gap
+         * @designToken stepper.step.gap
          */
         gap?: string;
     };
     /**
-     * Used to pass tokens of the item header section
+     * Used to pass tokens of the step header section
      */
-    itemHeader?: {
+    stepHeader?: {
         /**
-         * Padding of item header
+         * Padding of step header
          *
-         * @designToken stepper.item.header.padding
+         * @designToken stepper.step.header.padding
          */
         padding?: string;
         /**
-         * Border radius of item header
+         * Border radius of step header
          *
-         * @designToken stepper.item.header.border.radius
+         * @designToken stepper.step.header.border.radius
          */
         borderRadius?: string;
         /**
-         * Focus ring of item header
+         * Focus ring of step header
          */
         focusRing?: {
             /**
-             * Focus ring width of item header
+             * Focus ring width of step header
              *
-             * @designToken stepper.item.header.focus.ring.width
+             * @designToken stepper.step.header.focus.ring.width
              */
             width?: string;
             /**
-             * Focus ring style of item header
+             * Focus ring style of step header
              *
-             * @designToken stepper.item.header.focus.ring.style
+             * @designToken stepper.step.header.focus.ring.style
              */
             style?: string;
             /**
-             * Focus ring color of item header
+             * Focus ring color of step header
              *
-             * @designToken stepper.item.header.focus.ring.color
+             * @designToken stepper.step.header.focus.ring.color
              */
             color?: string;
             /**
-             * Focus ring offset of item header
+             * Focus ring offset of step header
              *
-             * @designToken stepper.item.header.focus.ring.offset
+             * @designToken stepper.step.header.focus.ring.offset
              */
             offset?: string;
             /**
-             * Focus ring shadow of item header
+             * Focus ring shadow of step header
              *
-             * @designToken stepper.item.header.focus.ring.shadow
+             * @designToken stepper.step.header.focus.ring.shadow
              */
             shadow?: string;
         };
         /**
-         * Gap of item header
+         * Gap of step header
          *
-         * @designToken stepper.item.header.gap
+         * @designToken stepper.step.header.gap
          */
         gap?: string;
     };
     /**
-     * Used to pass tokens of the item title section
+     * Used to pass tokens of the step title section
      */
-    itemTitle?: {
+    stepTitle?: {
         /**
-         * Color of item title
+         * Color of step title
          *
-         * @designToken stepper.item.title.color
+         * @designToken stepper.step.title.color
          */
         color?: string;
         /**
-         * Active color of item title
+         * Active color of step title
          *
-         * @designToken stepper.item.title.active.color
+         * @designToken stepper.step.title.active.color
          */
         activeColor?: string;
         /**
-         * Font weight of item title
+         * Font weight of step title
          *
-         * @designToken stepper.item.title.font.weight
+         * @designToken stepper.step.title.font.weight
          */
         fontWeight?: string;
     };
     /**
-     * Used to pass tokens of the item number section
+     * Used to pass tokens of the step number section
      */
-    itemNumber?: {
+    stepNumber?: {
         /**
-         * Background of item number
+         * Background of step number
          *
-         * @designToken stepper.item.number.background
+         * @designToken stepper.step.number.background
          */
         background?: string;
         /**
-         * Active background of item number
+         * Active background of step number
          *
-         * @designToken stepper.item.number.active.background
+         * @designToken stepper.step.number.active.background
          */
         activeBackground?: string;
         /**
-         * Border color of item number
+         * Border color of step number
          *
-         * @designToken stepper.item.number.border.color
+         * @designToken stepper.step.number.border.color
          */
         borderColor?: string;
         /**
-         * Active border color of item number
+         * Active border color of step number
          *
-         * @designToken stepper.item.number.active.border.color
+         * @designToken stepper.step.number.active.border.color
          */
         activeBorderColor?: string;
         /**
-         * Color of item number
+         * Color of step number
          *
-         * @designToken stepper.item.number.color
+         * @designToken stepper.step.number.color
          */
         color?: string;
         /**
-         * Active color of item number
+         * Active color of step number
          *
-         * @designToken stepper.item.number.active.color
+         * @designToken stepper.step.number.active.color
          */
         activeColor?: string;
         /**
-         * Size of item number
+         * Size of step number
          *
-         * @designToken stepper.item.number.size
+         * @designToken stepper.step.number.size
          */
         size?: string;
         /**
-         * Font size of item number
+         * Font size of step number
          *
-         * @designToken stepper.item.number.font.size
+         * @designToken stepper.step.number.font.size
          */
         fontSize?: string;
         /**
-         * Font weight of item number
+         * Font weight of step number
          *
-         * @designToken stepper.item.number.font.weight
+         * @designToken stepper.step.number.font.weight
          */
         fontWeight?: string;
         /**
-         * Border radius of item number
+         * Border radius of step number
          *
-         * @designToken stepper.item.number.border.radius
+         * @designToken stepper.step.number.border.radius
          */
         borderRadius?: string;
         /**
-         * Shadow of item number
+         * Shadow of step number
          *
-         * @designToken stepper.item.number.shadow
+         * @designToken stepper.step.number.shadow
          */
         shadow?: string;
     };
     /**
-     * Used to pass tokens of the vertical panel container section
+     * Used to pass tokens of the steppanels section
      */
-    verticalPanelContainer?: {
+    steppanels?: {
         /**
-         * Padding left of vertical panel container
+         * Padding of steppanels
          *
-         * @designToken stepper.vertical.panel.container.padding.left
+         * @designToken stepper.steppanels.padding
          */
-        paddingLeft?: string;
+        padding?: string;
     };
     /**
-     * Used to pass tokens of the panel content section
+     * Used to pass tokens of the steppanel section
      */
-    panelContent?: {
+    steppanel?: {
         /**
-         * Background of panel content
+         * Background of steppanel
          *
-         * @designToken stepper.panel.content.background
+         * @designToken stepper.steppanel.background
          */
         background?: string;
         /**
-         * Color of panel content
+         * Color of steppanel
          *
-         * @designToken stepper.panel.content.color
+         * @designToken stepper.steppanel.color
          */
         color?: string;
         /**
-         * Orientation of panel content
+         * Padding of steppanel
+         *
+         * @designToken stepper.steppanel.padding
          */
-        orientation?: {
+        padding?: string;
+        /**
+         * Last of steppanel
+         */
+        last?: {
             /**
-             * Orientation horizontal of panel content
+             * Last padding of steppanel
+             *
+             * @designToken stepper.steppanel.last.padding
              */
-            horizontal?: {
-                /**
-                 * Orientation horizontal padding of panel content
-                 *
-                 * @designToken stepper.panel.content.orientation.horizontal.padding
-                 */
-                padding?: string;
-            };
-            /**
-             * Orientation vertical of panel content
-             */
-            vertical?: {
-                /**
-                 * Orientation vertical padding of panel content
-                 *
-                 * @designToken stepper.panel.content.orientation.vertical.padding
-                 */
-                padding?: string;
-                /**
-                 * Orientation vertical last of panel content
-                 */
-                last?: {
-                    /**
-                     * Orientation vertical last padding of panel content
-                     *
-                     * @designToken stepper.panel.content.orientation.vertical.last.padding
-                     */
-                    padding?: string;
-                };
-            };
+            padding?: string;
         };
     };
 }
diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js
index 3dc38802e..59a0c87a9 100644
--- a/modules/nuxt-primevue/runtime/core/components/index.js
+++ b/modules/nuxt-primevue/runtime/core/components/index.js
@@ -52,6 +52,11 @@ const panel = [
     'ScrollPanel',
     'Splitter',
     'SplitterPanel',
+    'Step',
+    'StepItem',
+    'StepList',
+    'StepPanel',
+    'StepPanels',
     'Stepper',
     'StepperPanel',
     'TabView',
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index c5790d736..7d2dae4f0 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -102,9 +102,14 @@ const STYLE_ALIAS = {
     'primevue/splitbutton/style': path.resolve(__dirname, './components/lib/splitbutton/style/SplitButtonStyle.js'),
     'primevue/splitter/style': path.resolve(__dirname, './components/lib/splitter/style/SplitterStyle.js'),
     'primevue/splitterpanel/style': path.resolve(__dirname, './components/lib/splitterpanel/style/SplitterPanelStyle.js'),
-    'primevue/steps/style': path.resolve(__dirname, './components/lib/steps/style/StepsStyle.js'),
+    'primevue/step/style': path.resolve(__dirname, './components/lib/step/style/StepStyle.js'),
+    'primevue/stepitem/style': path.resolve(__dirname, './components/lib/stepitem/style/StepItemStyle.js'),
+    'primevue/steplist/style': path.resolve(__dirname, './components/lib/steplist/style/StepListStyle.js'),
+    'primevue/steppanel/style': path.resolve(__dirname, './components/lib/steppanel/style/StepPanelStyle.js'),
+    'primevue/steppanels/style': path.resolve(__dirname, './components/lib/steppanels/style/StepPanelsStyle.js'),
     'primevue/stepper/style': path.resolve(__dirname, './components/lib/stepper/style/StepperStyle.js'),
     'primevue/stepperpanel/style': path.resolve(__dirname, './components/lib/stepperpanel/style/StepperPanelStyle.js'),
+    'primevue/steps/style': path.resolve(__dirname, './components/lib/steps/style/StepsStyle.js'),
     'primevue/styleclass/style': path.resolve(__dirname, './components/lib/styleclass/style/StyleClassStyle.js'),
     'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'),
     'primevue/tabs/style': path.resolve(__dirname, './components/lib/tabs/style/TabsStyle.js'),