@syncfusion/ej2-navigations 25.2.4 → 26.1.35-750253

package/styles/stepper/material3.css

@@ -100,7 +100,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -116,77 +116,95 @@
 .e-stepper {
   position: relative;
 }
+.e-stepper .e-step-selected .e-text,
+.e-stepper .e-step-selected .e-label {
+  font-weight: 600;
+}
 .e-stepper.e-stepper-readonly,
 .e-stepper .e-step-disabled {
   cursor: default;
   pointer-events: none;
 }
-.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator {
+.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 32px;
   border-radius: 9999px;
 }
-.e-stepper.e-step-type-indicator .e-step-container .e-step-content {
+.e-stepper.e-step-type-indicator .e-step-content, .e-stepper.e-step-type-label .e-step-content {
   padding: 0 8px;
 }
-.e-stepper .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip), .e-stepper.e-vertical.e-label-after .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip), .e-stepper.e-vertical.e-label-before .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+.e-stepper .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip), .e-stepper.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip), .e-stepper.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
   position: relative;
 }
-.e-stepper.e-horizontal .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+.e-stepper.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
   position: unset;
 }
 .e-stepper .e-tooltip-wrap.e-stepper-tooltip {
   display: none;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   left: 50%;
   top: -8px;
-  transform: translate(-50%, -100%);
+  -webkit-transform: translate(-50%, -100%);
+          transform: translate(-50%, -100%);
 }
 .e-stepper .e-tooltip-wrap.e-stepper-tooltip.e-show-tooltip {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 .e-stepper .e-tooltip-wrap.e-stepper-tooltip .e-tip-content {
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 .e-stepper .e-tooltip-wrap.e-stepper-tooltip .e-arrow-tip.e-tip-bottom {
   left: 50%;
   top: 100%;
-  transform: translate(-50%, 0);
+  -webkit-transform: translate(-50%, 0);
+          transform: translate(-50%, 0);
 }
 .e-stepper .e-tooltip-wrap.e-stepper-tooltip .e-arrow-tip-inner.e-tip-bottom {
   top: -6px;
 }
-.e-stepper .e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
+.e-stepper .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
   left: unset;
   top: 0;
-  transform: translate(0%, -135%);
+  -webkit-transform: translate(0%, -135%);
+          transform: translate(0%, -135%);
 }
 .e-stepper.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
-  transform: translate(-50%, -115%);
+  -webkit-transform: translate(-50%, -115%);
+          transform: translate(-50%, -115%);
 }
 .e-stepper .e-stepper-steps {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 0;
   margin: 0;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   position: relative;
-  -ms-flex-align: start;
-      align-items: flex-start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
 }
 .e-stepper .e-stepper-steps .e-step-container,
 .e-stepper .e-stepper-steps .e-step,
 .e-stepper .e-stepper-steps .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
 .e-stepper .e-stepper-steps .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
 .e-stepper .e-stepper-steps .e-step-label-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 .e-stepper .e-step-container {
   max-width: var(--max-width);
@@ -198,6 +216,7 @@
 .e-stepper .e-step-container .e-step-text-container {
   max-width: clamp(100%, 10em, 100%);
   white-space: nowrap;
+  font-size: 14px;
 }
 .e-stepper .e-step-container .e-step-label-optional {
   font-size: 12px;
@@ -205,10 +224,13 @@
       flex-basis: 100%;
 }
 .e-stepper .e-step-container .e-step-optional-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .e-stepper .e-step-container .e-step-content {
   font-size: 16px;
@@ -225,17 +247,15 @@
   padding-block: 5px;
 }
 .e-stepper .e-step-container.e-step-text-only.e-step-error .e-step-text-container, .e-stepper .e-step-container.e-step-text-only.e-step-valid .e-step-text-container, .e-stepper .e-step-container.e-step-label-only.e-step-error .e-step-label-container, .e-stepper .e-step-container.e-step-label-only.e-step-valid .e-step-label-container {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .e-stepper .e-step-container.e-step-text-only.e-step-error .e-step-text-container .e-step-validation-icon, .e-stepper .e-step-container.e-step-text-only.e-step-valid .e-step-text-container .e-step-validation-icon, .e-stepper .e-step-container.e-step-label-only.e-step-error .e-step-label-container .e-step-validation-icon, .e-stepper .e-step-container.e-step-label-only.e-step-valid .e-step-label-container .e-step-validation-icon {
   position: relative;
   top: 0.25em;
 }
-.e-stepper .e-step-container .e-step-label-container,
-.e-stepper .e-step-container .e-step-text-container {
-  font-size: 14px;
-}
 .e-stepper .e-step-container .e-step,
 .e-stepper .e-step-container .e-indicator {
   border-radius: 9999px;
@@ -250,54 +270,63 @@
   display: block;
 }
 .e-stepper.e-horizontal .e-stepper-steps {
-  -ms-flex-direction: row;
-      flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
 }
-.e-stepper.e-horizontal.e-label-before:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar, .e-stepper.e-horizontal.e-label-after:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+.e-stepper.e-horizontal.e-label-before:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar, .e-stepper.e-horizontal.e-label-after:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
   margin-left: var(--progress-left-position);
   top: var(--progress-top-position);
   width: var(--progress-bar-width);
 }
-.e-stepper.e-horizontal.e-label-before.e-rtl:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar, .e-stepper.e-horizontal.e-label-after.e-rtl:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+.e-stepper.e-horizontal.e-label-before.e-rtl:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar, .e-stepper.e-horizontal.e-label-after.e-rtl:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
   margin-right: var(--progress-left-position);
   margin-left: unset;
 }
-.e-stepper.e-horizontal .e-step-icon.e-step-label {
+.e-stepper.e-horizontal .e-step-item.e-step-label {
   gap: 1em;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
-.e-stepper.e-horizontal .e-step-icon.e-step-label .e-step-label-container {
+.e-stepper.e-horizontal .e-step-item.e-step-label .e-step-label-container {
   position: relative;
 }
-.e-stepper.e-horizontal .e-step-icon.e-step-label .e-step-label-container.e-label-before {
-  -ms-flex-order: -1;
-      order: -1;
+.e-stepper.e-horizontal .e-step-item.e-step-label .e-step-label-container.e-label-before {
+  -webkit-box-ordinal-group: 0;
+      -ms-flex-order: -1;
+          order: -1;
 }
 .e-stepper.e-horizontal.e-label-start .e-step-text-container {
-  -ms-flex-order: -1;
-      order: -1;
+  -webkit-box-ordinal-group: 0;
+      -ms-flex-order: -1;
+          order: -1;
 }
-.e-stepper.e-horizontal .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+.e-stepper.e-horizontal .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
   position: absolute;
   top: 2.5em;
   margin-left: 2.5em;
 }
-.e-stepper.e-horizontal.e-label-start .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional, .e-stepper.e-horizontal.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+.e-stepper.e-horizontal.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional, .e-stepper.e-horizontal.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
   margin-right: 2.5em;
   margin-left: unset;
 }
-.e-stepper.e-horizontal.e-label-start.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+.e-stepper.e-horizontal.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
   margin-right: unset;
   margin-left: 2.5em;
 }
 .e-stepper.e-horizontal.e-label-before .e-stepper-steps:has(.e-step-label-optional) {
-  -ms-flex-align: end;
-      align-items: flex-end;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
 }
 .e-stepper.e-horizontal.e-label-before .e-stepper-steps .e-step-label-container.e-label-before:has(.e-step-label-optional) {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   gap: 0.5em;
 }
 .e-stepper.e-horizontal .e-text,
@@ -308,19 +337,16 @@
 }
 .e-stepper.e-horizontal .e-step-text.e-step-text-only:has(.e-step-label-optional),
 .e-stepper.e-horizontal .e-step-label.e-step-label-only:has(.e-step-label-optional),
-.e-stepper.e-horizontal .e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
-.e-stepper.e-horizontal .e-step-label-container.e-label-after:has(.e-step-label-optional) {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-.e-stepper.e-horizontal.e-step-type-indicator .e-step-container {
+.e-stepper.e-horizontal .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
+.e-stepper.e-horizontal .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
+.e-stepper.e-horizontal .e-step-label-container.e-label-after:has(.e-step-label-optional), .e-stepper.e-horizontal.e-step-type-indicator .e-step-container {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.e-stepper.e-horizontal .e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
+.e-stepper.e-horizontal .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
   margin-top: 0.5em;
 }
-.e-stepper.e-horizontal.e-label-after .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
+.e-stepper.e-horizontal.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
   margin-top: 0.2em;
 }
 .e-stepper.e-vertical {
@@ -334,71 +360,80 @@
 .e-stepper.e-vertical:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
   position: absolute;
 }
-.e-stepper.e-vertical:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+.e-stepper.e-vertical:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
   margin-top: 3em;
   margin-left: 4em;
 }
-.e-stepper.e-vertical.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+.e-stepper.e-vertical.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
   margin-left: unset;
   margin-right: 4em;
 }
 .e-stepper.e-vertical .e-stepper-steps {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   min-height: inherit;
   float: left;
-  -ms-flex-align: start;
-      align-items: start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
   margin: 0;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
 .e-stepper.e-vertical.e-rtl .e-stepper-steps {
   float: right;
 }
-.e-stepper.e-vertical .e-stepper-steps:has(.e-step-icon:not(.e-step-text):not(.e-step-label)),
+.e-stepper.e-vertical .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
 .e-stepper.e-vertical .e-stepper-steps:has(.e-step-text.e-step-text-only),
-.e-stepper.e-vertical .e-stepper-steps:has(.e-step-label.e-step-label-only), .e-stepper.e-vertical.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-icon)), .e-stepper.e-vertical.e-step-type-indicator .e-stepper-steps {
-  -ms-flex-align: center;
-      align-items: center;
+.e-stepper.e-vertical .e-stepper-steps:has(.e-step-label.e-step-label-only), .e-stepper.e-vertical.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)), .e-stepper.e-vertical.e-step-type-indicator .e-stepper-steps {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.e-stepper.e-vertical .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
-.e-stepper.e-vertical .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+.e-stepper.e-vertical .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
+.e-stepper.e-vertical .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
   margin-left: 10px;
 }
-.e-stepper.e-vertical.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
-.e-stepper.e-vertical.e-rtl .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+.e-stepper.e-vertical.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
+.e-stepper.e-vertical.e-rtl .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
   margin-left: unset;
   margin-right: 10px;
 }
-.e-stepper.e-vertical .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional), .e-stepper.e-vertical.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
+.e-stepper.e-vertical .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional), .e-stepper.e-vertical.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
 .e-stepper.e-vertical .e-step-text-only.e-step-text:has(.e-step-label-optional),
 .e-stepper.e-vertical .e-step-label-only.e-step-label:has(.e-step-label-optional) {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
-.e-stepper.e-vertical .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional) .e-step-label-optional, .e-stepper.e-vertical.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) .e-step-label-optional,
+.e-stepper.e-vertical .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional) .e-step-label-optional, .e-stepper.e-vertical.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) .e-step-label-optional,
 .e-stepper.e-vertical .e-step-text-only.e-step-text:has(.e-step-label-optional) .e-step-label-optional,
 .e-stepper.e-vertical .e-step-label-only.e-step-label:has(.e-step-label-optional) .e-step-label-optional {
   position: unset;
 }
-.e-stepper.e-vertical .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional), .e-stepper.e-vertical.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
+.e-stepper.e-vertical .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional), .e-stepper.e-vertical.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
   gap: 0.5em;
 }
-.e-stepper.e-vertical.e-label-before .e-step-icon.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional), .e-stepper.e-vertical.e-label-after .e-step-icon.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional) {
-  -ms-flex-direction: column;
-      flex-direction: column;
+.e-stepper.e-vertical.e-label-before .e-step-item.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional), .e-stepper.e-vertical.e-label-after .e-step-item.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
-.e-stepper.e-vertical.e-label-before .e-step-icon.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional) .e-label, .e-stepper.e-vertical.e-label-after .e-step-icon.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional) .e-label {
+.e-stepper.e-vertical.e-label-before .e-step-item.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional) .e-label, .e-stepper.e-vertical.e-label-after .e-step-item.e-step-label .e-step-label-container.e-label-after:has(.e-step-label-optional) .e-label {
   line-height: 2em;
 }
-.e-stepper.e-vertical.e-label-before .e-step-icon.e-step-label .e-step-label-optional, .e-stepper.e-vertical.e-label-after .e-step-icon.e-step-label .e-step-label-optional {
+.e-stepper.e-vertical.e-label-before .e-step-item.e-step-label .e-step-label-optional, .e-stepper.e-vertical.e-label-after .e-step-item.e-step-label .e-step-label-optional {
   position: unset;
 }
-.e-stepper.e-vertical .e-step-container.e-step-label.e-step-text:not(.e-step-icon) .e-step-label-container.e-label-after {
+.e-stepper.e-vertical .e-step-container.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
   position: absolute;
 }
-.e-stepper.e-vertical .e-step-container.e-step-label.e-step-text:not(.e-step-icon) .e-step-label-container.e-label-after .e-step-label-optional {
+.e-stepper.e-vertical .e-step-container.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after .e-step-label-optional {
   left: 0;
 }
 .e-stepper.e-vertical .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
@@ -419,20 +454,24 @@
   padding-bottom: 6px;
 }
 .e-stepper.e-vertical.e-label-top .e-stepper-steps, .e-stepper.e-vertical.e-label-bottom .e-stepper-steps {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .e-stepper.e-vertical.e-label-top .e-stepper-steps .e-step-container, .e-stepper.e-vertical.e-label-bottom .e-stepper-steps .e-step-container {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .e-stepper.e-vertical.e-label-top .e-stepper-steps .e-step-container .e-step-text-container, .e-stepper.e-vertical.e-label-bottom .e-stepper-steps .e-step-container .e-step-text-container {
   margin-left: 0;
 }
 .e-stepper.e-vertical.e-label-top .e-step-container .e-step-label-optional,
 .e-stepper.e-vertical.e-label-top .e-step-container .e-step-text-container {
-  -ms-flex-order: -1;
-      order: -1;
+  -webkit-box-ordinal-group: 0;
+      -ms-flex-order: -1;
+          order: -1;
 }
 .e-stepper .e-stepper-progressbar {
   height: 1.6px;
@@ -443,9 +482,12 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   height: 100%;
   width: var(--progress-value);
+  -webkit-transition-property: width;
   transition-property: width;
-  transition-duration: var(--duration);
-  transition-delay: var(--delay);
+  -webkit-transition-duration: var(--duration);
+          transition-duration: var(--duration);
+  -webkit-transition-delay: var(--delay);
+          transition-delay: var(--delay);
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
@@ -456,6 +498,7 @@
 .e-stepper.e-vertical .e-stepper-progressbar > .e-progressbar-value {
   width: 100%;
   height: var(--progress-value);
+  -webkit-transition-property: height;
   transition-property: height;
 }
 .e-stepper.e-vertical.e-rtl .e-stepper-progressbar {
@@ -474,12 +517,12 @@
   top: 90% !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator,
-.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator {
+.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,
+.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 28px;
 }
-.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
-.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator {
+.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
+.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator {
   width: 28px;
   height: 28px;
 }
@@ -513,12 +556,12 @@
   font-size: 10px;
 }
 
-.e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator,
-.e-bigger .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator {
+.e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,
+.e-bigger .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 40px;
 }
-.e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
-.e-bigger .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator {
+.e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
+.e-bigger .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator {
   width: 40px;
   height: 40px;
 }
@@ -552,16 +595,16 @@
   font-size: 14px;
 }
 
-.e-bigger.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator,
-.e-bigger.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator,
-.e-bigger .e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator,
-.e-small .e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) .e-icons.e-step-indicator {
+.e-bigger.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,
+.e-bigger.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,
+.e-bigger .e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,
+.e-small .e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 36px;
 }
-.e-bigger.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
-.e-bigger.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
-.e-bigger .e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
-.e-small .e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator {
+.e-bigger.e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
+.e-bigger.e-small .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
+.e-bigger .e-small.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator,
+.e-small .e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text).e-step-notstarted .e-icons.e-step-indicator {
   width: 36px;
   height: 36px;
 }
@@ -622,6 +665,7 @@
 .e-stepper .e-step,
 .e-stepper .e-indicator {
   color: rgba(var(--color-sf-on-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
 }
 .e-stepper .e-step-indicator {
@@ -655,10 +699,6 @@
 .e-stepper .e-step-error .e-indicator:hover {
   color: rgba(var(--color-sf-on-surface));
 }
-.e-stepper .e-step-selected .e-text,
-.e-stepper .e-step-selected .e-label {
-  font-weight: 600;
-}
 .e-stepper .e-step-valid.e-step-text-only .e-step-validation-icon,
 .e-stepper .e-step-valid.e-step-label-only .e-step-validation-icon {
   color: rgba(var(--color-sf-success));
@@ -677,7 +717,7 @@
 .e-stepper .e-step-completed:not(.e-step-error) .e-label {
   color: rgba(var(--color-sf-primary));
 }
-.e-stepper .e-step-label:not(.e-step-icon) .e-step-label-container {
+.e-stepper .e-step-label:not(.e-step-item) .e-step-label-container {
   background-color: rgba(var(--color-sf-surface));
 }
 .e-stepper .e-step-text-container {
@@ -685,6 +725,7 @@
   border-color: transparent;
 }
 .e-stepper .e-step-disabled .e-indicator {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface), 0.38);
 }
@@ -693,7 +734,7 @@
 .e-stepper .e-step-disabled .e-step-validation-icon {
   color: rgba(var(--color-sf-on-surface), 0.38);
 }
-.e-stepper.e-vertical .e-step-text-only.e-step-text .e-step-label-optional, .e-stepper.e-vertical .e-step-label-only.e-step-label .e-step-label-optional, .e-stepper.e-vertical .e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional, .e-stepper.e-vertical.e-label-top .e-step-label-optional, .e-stepper.e-vertical.e-label-bottom .e-step-label-optional {
+.e-stepper.e-vertical .e-step-text-only.e-step-text .e-step-label-optional, .e-stepper.e-vertical .e-step-label-only.e-step-label .e-step-label-optional, .e-stepper.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional, .e-stepper.e-vertical.e-label-top .e-step-label-optional, .e-stepper.e-vertical.e-label-bottom .e-step-label-optional {
   background-color: rgba(var(--color-sf-surface));
 }
 .e-stepper .e-stepper-progressbar {
@@ -703,31 +744,36 @@
   background-color: rgba(var(--color-sf-primary));
 }
 .e-stepper:not(.e-steps-focus) .e-step-selected .e-step {
-  box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
+  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
+          box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
 }
 .e-stepper .e-step-focus .e-step,
 .e-stepper .e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-step-text-only.e-step-focus .e-text,
 .e-stepper .e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) :focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
-  box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-on-surface)), 0 0 0 8px rgba(var(--color-sf-surface));
+  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-on-surface)), 0 0 0 8px rgba(var(--color-sf-surface));
+          box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-on-surface)), 0 0 0 8px rgba(var(--color-sf-surface));
 }
 .e-stepper:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
 .e-stepper .e-step-valid.e-step-focus .e-step,
 .e-stepper .e-step-valid.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-step-valid.e-step-text-only.e-step-focus .e-text,
 .e-stepper .e-step-valid.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-success)), 0 0 0 8px rgba(var(--color-sf-surface));
+  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-success)), 0 0 0 8px rgba(var(--color-sf-surface));
+          box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-success)), 0 0 0 8px rgba(var(--color-sf-surface));
 }
 .e-stepper:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
 .e-stepper .e-step-error.e-step-focus .e-step,
 .e-stepper .e-step-error.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-step-error.e-step-text-only.e-step-focus .e-text,
 .e-stepper .e-step-error.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-error)), 0 0 0 8px rgba(var(--color-sf-surface));
+  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-error)), 0 0 0 8px rgba(var(--color-sf-surface));
+          box-shadow: 0 0 0 2px rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-error)), 0 0 0 8px rgba(var(--color-sf-surface));
 }
 .e-stepper .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
 .e-stepper .e-step-container:not(.e-step-focus).e-step-completed .e-step, .e-stepper.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
-  box-shadow: 0 0 0 8px rgba(var(--color-sf-surface));
+  -webkit-box-shadow: 0 0 0 8px rgba(var(--color-sf-surface));
+          box-shadow: 0 0 0 8px rgba(var(--color-sf-surface));
 }
 .e-stepper .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
 .e-stepper .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
@@ -740,6 +786,7 @@
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: rgba(var(--color-sf-on-primary));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
@@ -747,6 +794,7 @@
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,