primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-stepper.mjs

@@ -1,204 +1,157 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, contentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, model, computed, contentChild, effect, input, ContentChildren, ContentChild, signal, NgModule } from '@angular/core';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { Injectable, contentChildren, forwardRef, inject, ViewEncapsulation, ChangeDetectionStrategy, Component, model, computed, contentChild, effect, input, ContentChildren, ContentChild, signal, NgModule } from '@angular/core';
+import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
 import { find, findIndexInList, uuid } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { transformToBoolean } from 'primeng/utils';
 import { BaseStyle } from 'primeng/base';
+import { css } from '@primeuix/styled';
+import { style } from '@primeuix/styles/stepper';
 
-const theme = ({ dt }) => `
-.p-steplist {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    overflow-x: auto;
-}
-
-.p-step {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: ${dt('stepper.step.gap')};
-    padding: ${dt('stepper.step.padding')};
-}
-
-.p-step:last-of-type {
-    flex: initial;
-}
-
-.p-step-header {
-    border: 0 none;
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    cursor: pointer;
-    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.step.header.border.radius')};
-    outline-color: transparent;
-    background: transparent;
-    padding: ${dt('stepper.step.header.padding')};
-    gap: ${dt('stepper.step.header.gap')};
-}
-
-.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-step {
-    cursor: auto;
-}
-
-.p-step-title {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    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-step-number {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    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.step.number.border.radius')};
-    position: relative;
-    font-weight: ${dt('stepper.step.number.font.weight')};
-}
-
-.p-step-number::after {
-    content: " ";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: ${dt('stepper.step.number.border.radius')};
-    box-shadow: ${dt('stepper.step.number.shadow')};
-}
-
-.p-step-active .p-step-header {
-    cursor: default;
-}
-
-.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-step-active .p-step-title {
-    color: ${dt('stepper.step.title.active.color')};
-}
-
-.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-step:has(~ .p-step-active) .p-stepper-separator {
-    background: ${dt('stepper.separator.active.background')};
-}
-
-.p-stepper-separator {
-    flex: 1 1 0;
-    background: ${dt('stepper.separator.background')};
-    width: 100%;
-    height: ${dt('stepper.separator.size')};
-    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-steppanels {
-    padding: ${dt('stepper.steppanels.padding')};
-}
-
-.p-steppanel {
-    background: ${dt('stepper.steppanel.background')};
-    color: ${dt('stepper.steppanel.color')};
-}
-
-.p-stepper:has(.p-stepitem) {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-stepitem {
-    display: flex;
-    flex-direction: column;
-    flex: initial;
-}
-
-.p-stepitem.p-stepitem-active {
-    flex: 1 1 auto;
-}
-
-.p-stepitem .p-step {
-    flex: initial;
-}
-
-.p-stepitem .p-steppanel-content {
-    width: 100%;
-    padding: ${dt('stepper.steppanel.padding')};
-    margin-inline-start: 1rem;
-}
-
-.p-stepitem .p-steppanel {
-    display: flex;
-    flex: 1 1 auto;
+const classes$5 = {
+    root: ({ instance }) => [
+        'p-stepitem',
+        {
+            'p-stepitem-active': instance.isActive()
+        }
+    ]
+};
+class StepItemStyle extends BaseStyle {
+    name = 'stepitem';
+    classes = classes$5;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItemStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItemStyle });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItemStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primeng.org/stepper/)
+ *
+ * @module stepitemstyle
+ *
+ */
+var StepItemClasses;
+(function (StepItemClasses) {
+    /**
+     * Class name of the root element
+     */
+    StepItemClasses["root"] = "p-stepitem";
+})(StepItemClasses || (StepItemClasses = {}));
 
-.p-stepitem .p-stepper-separator {
-    flex: 0 0 auto;
-    width: ${dt('stepper.separator.size')};
-    height: auto;
-    margin: ${dt('stepper.separator.margin')};
-    position: relative;
-    left: calc(-1 * ${dt('stepper.separator.size')});
+const classes$4 = {
+    root: 'p-steplist'
+};
+class StepListStyle extends BaseStyle {
+    name = 'steplist';
+    classes = classes$4;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepListStyle });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepListStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primeng.org/stepper/)
+ *
+ * @module stepliststyle
+ *
+ */
+var StepListClasses;
+(function (StepListClasses) {
+    /**
+     * Class name of the root element
+     */
+    StepListClasses["root"] = "p-stepitem";
+})(StepListClasses || (StepListClasses = {}));
 
-.p-stepitem .p-stepper-separator:dir(rtl) {
-    left: calc(-9 * ${dt('stepper.separator.size')});
+const classes$3 = {
+    root: 'p-steppanels'
+};
+class StepPanelsStyle extends BaseStyle {
+    name = 'steppanel';
+    classes = classes$3;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelsStyle });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelsStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * StepPanel is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primeng.org/stepper/)
+ *
+ * @module steppanelsstyle
+ *
+ */
+var StepPanelsClasses;
+(function (StepPanelsClasses) {
+    /**
+     * Class name of the root element
+     */
+    StepPanelsClasses["root"] = "p-steppanels";
+})(StepPanelsClasses || (StepPanelsClasses = {}));
 
-.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
-    background: ${dt('stepper.separator.active.background')};
+const classes$2 = {
+    root: ({ instance }) => [
+        'p-steppanel',
+        {
+            'p-steppanel-active': instance.isVertical() && instance.active()
+        }
+    ],
+    content: 'p-steppanel-content'
+};
+class StepPanelStyle extends BaseStyle {
+    name = 'steppanel';
+    classes = classes$2;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelStyle });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanelStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * StepPanel is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primeng.org/stepper/)
+ *
+ * @module steppanelstyle
+ *
+ */
+var StepPanelClasses;
+(function (StepPanelClasses) {
+    /**
+     * Class name of the root element
+     */
+    StepPanelClasses["root"] = "p-steppanel";
+})(StepPanelClasses || (StepPanelClasses = {}));
 
-.p-stepitem:last-of-type .p-steppanel {
-    padding-inline-start: ${dt('stepper.step.number.size')};
-}
-/* For PrimeNG */
-.p-steppanel {
-    overflow: hidden;
-}
+const theme = css `
+    ${style}
 
-.p-stepppanel:not(.ng-animating) {
-    overflow: inherit;
-}
+    /* For PrimeNG */
+    .p-steppanel:not(.p-steppanel-active) > .p-steppanel-content,
+    .p-steppanel-content.ng-animating {
+        overflow: hidden;
+    }
 `;
-const classes = {
-    root: ({ props }) => [
+const classes$1 = {
+    root: ({ instance }) => [
         'p-stepper p-component',
         {
-            'p-readonly': props.linear
+            'p-readonly': instance.linear()
         }
     ],
     separator: 'p-stepper-separator'
@@ -206,11 +159,11 @@ const classes = {
 class StepperStyle extends BaseStyle {
     name = 'stepper';
     theme = theme;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperStyle });
+    classes = classes$1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -234,12 +187,63 @@ var StepperClasses;
     StepperClasses["separator"] = "p-stepper-separator";
 })(StepperClasses || (StepperClasses = {}));
 
+const classes = {
+    root: ({ instance }) => [
+        'p-step',
+        {
+            'p-step-active': instance.active(),
+            'p-disabled': instance.isStepDisabled()
+        }
+    ],
+    header: 'p-step-header',
+    number: 'p-step-number',
+    title: 'p-step-title'
+};
+class StepStyle extends BaseStyle {
+    name = 'step';
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primeng.org/stepper/)
+ *
+ * @module stepstyle
+ *
+ */
+var StepClasses;
+(function (StepClasses) {
+    /**
+     * Class name of the root element
+     */
+    StepClasses["root"] = "p-step";
+    /**
+     * Class name of the header element
+     */
+    StepClasses["header"] = "p-step-header";
+    /**
+     * Class name of the number element
+     */
+    StepClasses["number"] = "p-step-number";
+    /**
+     * Class name of the title element
+     */
+    StepClasses["title"] = "p-step-title";
+})(StepClasses || (StepClasses = {}));
+
 class StepList extends BaseComponent {
     steps = contentChildren(forwardRef(() => Step));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: StepList, isStandalone: true, selector: "p-step-list", host: { properties: { "class.p-steplist": "true", "class.p-component": "true" } }, queries: [{ propertyName: "steps", predicate: i0.forwardRef(() => Step), isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    _componentStyle = inject(StepListStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: StepList, isStandalone: true, selector: "p-step-list", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepListStyle], queries: [{ propertyName: "steps", predicate: i0.forwardRef(() => Step), isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-list',
@@ -249,16 +253,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-steplist]': 'true',
-                        '[class.p-component]': 'true'
-                    }
+                        '[class]': 'cx("root")'
+                    },
+                    providers: [StepListStyle]
                 }]
         }] });
 class StepperSeparator extends BaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: StepperSeparator, isStandalone: true, selector: "p-stepper-separator", host: { properties: { "class.p-stepper-separator": "true", "class.p-component": "true" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    _componentStyle = inject(StepperStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperSeparator, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: StepperSeparator, isStandalone: true, selector: "p-stepper-separator", host: { properties: { "class": "cx(\"separator\")" } }, providers: [StepperStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperSeparator, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-stepper-separator',
@@ -268,9 +273,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-stepper-separator]': 'true',
-                        '[class.p-component]': 'true'
-                    }
+                        '[class]': 'cx("separator")'
+                    },
+                    providers: [StepperStyle]
                 }]
         }] });
 /**
@@ -298,10 +303,11 @@ class StepItem extends BaseComponent {
             this.stepPanel().value.set(this.value());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: StepItem, isStandalone: true, selector: "p-step-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-stepitem": "true", "class.p-component": "true", "attr.data-p-active": "isActive()" } }, queries: [{ propertyName: "step", first: true, predicate: i0.forwardRef(() => Step), descendants: true, isSignal: true }, { propertyName: "stepPanel", first: true, predicate: i0.forwardRef(() => StepPanel), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    _componentStyle = inject(StepItemStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: StepItem, isStandalone: true, selector: "p-step-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.data-p-active": "isActive()" } }, providers: [StepItemStyle], queries: [{ propertyName: "step", first: true, predicate: i0.forwardRef(() => Step), descendants: true, isSignal: true }, { propertyName: "stepPanel", first: true, predicate: i0.forwardRef(() => StepPanel), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-item',
@@ -311,10 +317,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-stepitem]': 'true',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.data-p-active]': 'isActive()'
-                    }
+                    },
+                    providers: [StepItemStyle]
                 }]
         }], ctorParameters: () => [] });
 /**
@@ -362,6 +368,7 @@ class Step extends BaseComponent {
     content;
     templates;
     _contentTemplate;
+    _componentStyle = inject(StepStyle);
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
@@ -374,12 +381,12 @@ class Step extends BaseComponent {
     onStepClick() {
         this.pcStepper.updateValue(this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: Step, isStandalone: true, selector: "p-step", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-step": "true", "class.p-step-active": "active()", "class.p-disabled": "isStepDisabled()", "class.p-component": "true", "attr.aria-current": "active() ? \"step\" : undefined", "attr.role": "\"presentation\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "isStepDisabled()", "attr.data-pc-name": "\"step\"" } }, queries: [{ propertyName: "content", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Step, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Step, isStandalone: true, selector: "p-step", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.aria-current": "active() ? \"step\" : undefined", "attr.role": "\"presentation\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "isStepDisabled()", "attr.data-pc-name": "\"step\"" } }, providers: [StepStyle], queries: [{ propertyName: "content", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         @if (!content && !_contentTemplate) {
-            <button [attr.id]="id()" class="p-step-header" [attr.role]="'tab'" [tabindex]="isStepDisabled() ? -1 : undefined" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
-                <span class="p-step-number">{{ value() }}</span>
-                <span class="p-step-title">
+            <button [attr.id]="id()" [class]="cx('header')" [attr.role]="'tab'" [tabindex]="isStepDisabled() ? -1 : undefined" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
+                <span [class]="cx('number')">{{ value() }}</span>
+                <span [class]="cx('title')">
                     <ng-content></ng-content>
                 </span>
             </button>
@@ -394,7 +401,7 @@ class Step extends BaseComponent {
         }
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "p-stepper-separator" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Step, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Step, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step',
@@ -402,9 +409,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [CommonModule, StepperSeparator, SharedModule],
                     template: `
         @if (!content && !_contentTemplate) {
-            <button [attr.id]="id()" class="p-step-header" [attr.role]="'tab'" [tabindex]="isStepDisabled() ? -1 : undefined" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
-                <span class="p-step-number">{{ value() }}</span>
-                <span class="p-step-title">
+            <button [attr.id]="id()" [class]="cx('header')" [attr.role]="'tab'" [tabindex]="isStepDisabled() ? -1 : undefined" [attr.aria-controls]="ariaControls()" [disabled]="isStepDisabled()" (click)="onStepClick()" type="button">
+                <span [class]="cx('number')">{{ value() }}</span>
+                <span [class]="cx('title')">
                     <ng-content></ng-content>
                 </span>
             </button>
@@ -421,16 +428,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-step]': 'true',
-                        '[class.p-step-active]': 'active()',
-                        '[class.p-disabled]': 'isStepDisabled()',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.aria-current]': 'active() ? "step" : undefined',
                         '[attr.role]': '"presentation"',
                         '[attr.data-p-active]': 'active()',
                         '[attr.data-p-disabled]': 'isStepDisabled()',
                         '[attr.data-pc-name]': '"step"'
-                    }
+                    },
+                    providers: [StepStyle]
                 }]
         }], propDecorators: { content: [{
                 type: ContentChild,
@@ -474,6 +479,7 @@ class StepPanel extends BaseComponent {
     contentTemplate;
     templates;
     _contentTemplate;
+    _componentStyle = inject(StepPanelStyle);
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
@@ -486,32 +492,28 @@ class StepPanel extends BaseComponent {
     updateValue(value) {
         this.pcStepper.updateValue(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: StepPanel, isStandalone: true, selector: "p-step-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-steppanel": "true", "class.p-component": "true", "class.p-steppanel-active": "active()", "attr.role": "\"tabpanel\"", "attr.aria-controls": "ariaControls()", "attr.id": "id()", "attr.data-p-active": "active()", "attr.data-pc-name": "\"steppanel\"" } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: StepPanel, isStandalone: true, selector: "p-step-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.role": "\"tabpanel\"", "attr.aria-controls": "ariaControls()", "attr.id": "id()", "attr.data-p-active": "active()", "attr.data-pc-name": "\"steppanel\"", "style.display": "!isVertical() && !active() ? \"none\" : \"\"" } }, providers: [StepPanelStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         @if (isSeparatorVisible()) {
             <p-stepper-separator />
         }
-        <div class="p-steppanel-content" [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined">
-            @if (active()) {
-                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
-            }
+        <div [class]="cx('content')" [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined">
+            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepperSeparator, selector: "p-stepper-separator" }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('content', [
-                state('hidden', style({
-                    height: '0',
-                    visibility: 'hidden'
+                state('hidden', style$1({
+                    height: '0'
                 })),
-                state('visible', style({
-                    height: '*',
-                    visibility: 'visible'
+                state('visible', style$1({
+                    height: '*'
                 })),
-                transition('visible <=> hidden', [animate('250ms cubic-bezier(0.86, 0, 0.07, 1)')]),
+                transition('visible <=> hidden', [animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')]),
                 transition('void => *', animate(0))
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-panel',
@@ -521,38 +523,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         @if (isSeparatorVisible()) {
             <p-stepper-separator />
         }
-        <div class="p-steppanel-content" [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined">
-            @if (active()) {
-                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
-            }
+        <div [class]="cx('content')" [@content]="isVertical() ? (active() ? { value: 'visible', params: { transitionParams: transitionOptions() } } : { value: 'hidden', params: { transitionParams: transitionOptions() } }) : undefined">
+            <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { activateCallback: updateValue.bind(this), value: value(), active: active() }"></ng-container>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-steppanel]': 'true',
-                        '[class.p-component]': 'true',
-                        '[class.p-steppanel-active]': 'active()',
+                        '[class]': 'cx("root")',
                         '[attr.role]': '"tabpanel"',
                         '[attr.aria-controls]': 'ariaControls()',
                         '[attr.id]': 'id()',
                         '[attr.data-p-active]': 'active()',
-                        '[attr.data-pc-name]': '"steppanel"'
+                        '[attr.data-pc-name]': '"steppanel"',
+                        '[style.display]': '!isVertical() && !active() ? "none" : ""'
                     },
                     animations: [
                         trigger('content', [
-                            state('hidden', style({
-                                height: '0',
-                                visibility: 'hidden'
+                            state('hidden', style$1({
+                                height: '0'
                             })),
-                            state('visible', style({
-                                height: '*',
-                                visibility: 'visible'
+                            state('visible', style$1({
+                                height: '*'
                             })),
-                            transition('visible <=> hidden', [animate('250ms cubic-bezier(0.86, 0, 0.07, 1)')]),
+                            transition('visible <=> hidden', [animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')]),
                             transition('void => *', animate(0))
                         ])
-                    ]
+                    ],
+                    providers: [StepPanelStyle]
                 }]
         }], propDecorators: { contentTemplate: [{
                 type: ContentChild,
@@ -562,10 +560,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class StepPanels extends BaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: StepPanels, isStandalone: true, selector: "p-step-panels", host: { properties: { "class.p-steppanels": "true", "class.p-component": "true" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    _componentStyle = inject(StepPanelsStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: StepPanels, isStandalone: true, selector: "p-step-panels", host: { properties: { "class": "cx(\"root\")" } }, providers: [StepPanelsStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepPanels, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepPanels, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-step-panels',
@@ -575,9 +574,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-steppanels]': 'true',
-                        '[class.p-component]': 'true'
-                    }
+                        '[class]': 'cx("root")'
+                    },
+                    providers: [StepPanelsStyle]
                 }]
         }] });
 /**
@@ -619,10 +618,10 @@ class Stepper extends BaseComponent {
     isStepActive(value) {
         return this.value() === value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: Stepper, isStandalone: true, selector: "p-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.p-stepper": "true", "class.p-component": "true", "attr.role": "\"tablist\"", "attr.id": "id()" } }, providers: [StepperStyle], queries: [{ propertyName: "stepItems", predicate: StepItem, isSignal: true }, { propertyName: "steps", predicate: Step, isSignal: true }, { propertyName: "stepList", first: true, predicate: StepList, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: Stepper, isStandalone: true, selector: "p-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.role": "\"tablist\"", "attr.id": "id()" } }, providers: [StepperStyle], queries: [{ propertyName: "stepItems", predicate: StepItem, isSignal: true }, { propertyName: "steps", predicate: Step, isSignal: true }, { propertyName: "stepList", first: true, predicate: StepList, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Stepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-stepper',
@@ -633,19 +632,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     providers: [StepperStyle],
                     host: {
-                        '[class.p-stepper]': 'true',
-                        '[class.p-component]': 'true',
+                        '[class]': 'cx("root")',
                         '[attr.role]': '"tablist"',
                         '[attr.id]': 'id()'
                     }
                 }]
         }] });
 class StepperModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule], exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule], exports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperModule, imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: StepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Stepper, StepList, StepPanels, StepPanel, StepItem, Step, StepperSeparator, SharedModule],