@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

package/components/Progress/progress.css

@@ -1,31 +1,33 @@
+:root,
 .pf-v5-c-progress {
-  --pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
+  --pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
-  --pf-v5-c-progress__status--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress__bar--before--Opacity: .2;
+  --pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
-  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
-  --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-v5-global--spacer--xs) - var(--pf-v5-c-progress--GridGap));
-  --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-sm__bar--Height: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-lg__bar--Height: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
+  --pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
+}
+
+.pf-v5-c-progress {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: auto auto;
@@ -35,9 +37,6 @@
 .pf-v5-c-progress.pf-m-sm {
   --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
 }
-.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
-  font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
-}
 .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
   font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
 }
@@ -69,7 +68,7 @@
 }
 .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure.pf-m-static-width {
   min-width: var(--pf-v5-c-progress__measure--m-static-width--MinWidth);
-  text-align: left;
+  text-align: start;
 }
 .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__bar,
 .pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__indicator {
@@ -93,18 +92,19 @@
   grid-template-columns: 1fr fit-content(50%);
 }
 .pf-v5-c-progress.pf-m-success {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
   --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
   --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
 }
 .pf-v5-c-progress.pf-m-warning {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
   --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
   --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
 }
 .pf-v5-c-progress.pf-m-danger {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
   --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
+  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
 }
 
 .pf-v5-c-progress__description {
@@ -124,7 +124,7 @@
   gap: var(--pf-v5-c-progress__status--Gap);
   align-items: flex-start;
   justify-content: flex-end;
-  text-align: right;
+  text-align: end;
   word-break: break-word;
 }
 
@@ -132,6 +132,12 @@
   color: var(--pf-v5-c-progress__status-icon--Color);
 }
 
+.pf-v5-c-progress__bar::before,
+.pf-v5-c-progress__indicator {
+  top: 0;
+  left: 0;
+}
+
 .pf-v5-c-progress__bar {
   position: relative;
   grid-row: 2/3;
@@ -140,21 +146,9 @@
   height: var(--pf-v5-c-progress__bar--Height);
   background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
 }
-.pf-v5-c-progress__bar::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  content: "";
-  background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
-  opacity: var(--pf-v5-c-progress__bar--before--Opacity);
-}
 
 .pf-v5-c-progress__indicator {
   position: absolute;
-  top: 0;
-  left: 0;
   height: var(--pf-v5-c-progress__indicator--Height);
   background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
 }
@@ -162,11 +156,5 @@
 .pf-v5-c-progress__helper-text {
   grid-row: 3/4;
   grid-column: 1/3;
-  margin-top: var(--pf-v5-c-progress__helper-text--MarginTop);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-progress {
-  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
+  margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
 }

package/components/Progress/progress.scss

@@ -1,40 +1,40 @@
 // @debug $progress; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$progress} {
   // Component variables
-  --#{$progress}--GridGap: var(--#{$pf-global}--spacer--md);
-
+  --#{$progress}--GridGap: var(--pf-t--global--spacer--md);
+  
   // Element variables
-  --#{$progress}__bar--before--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$progress}__bar--Height: var(--#{$pf-global}--spacer--md);
-  --#{$progress}__bar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
+  --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
+  --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
   --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
-  --#{$progress}__status--Gap: var(--#{$pf-global}--spacer--sm);
-  --#{$progress}__status-icon--Color: var(--#{$pf-global}--Color--100); // the status icon default color is the default text color
-  --#{$progress}__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
+  --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
+  --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
-  --#{$progress}__indicator--BackgroundColor: var(--#{$progress}__bar--before--BackgroundColor);
-  --#{$progress}__helper-text--MarginTop: calc(var(--#{$pf-global}--spacer--xs) - var(--#{$progress}--GridGap));
-
+  --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$progress}__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
+  
   // Modifier variables
-  --#{$progress}--m-success__bar--BackgroundColor: var(--#{$pf-global}--success-color--100);
-  --#{$progress}--m-warning__bar--BackgroundColor: var(--#{$pf-global}--warning-color--100);
-  --#{$progress}--m-danger__bar--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$progress}--m-success__status-icon--Color: var(--#{$pf-global}--success-color--100);
-  --#{$progress}--m-warning__status-icon--Color: var(--#{$pf-global}--warning-color--100);
-  --#{$progress}--m-danger__status-icon--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$progress}--m-inside__indicator--MinWidth: var(--#{$pf-global}--spacer--xl);
-  --#{$progress}--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // the measure needs to be white when moved inside the progress bar indicator
-  --#{$progress}--m-success--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // remove at breaking change
-  --#{$progress}--m-warning--m-inside__measure--Color: var(--#{$pf-global}--Color--dark-100); // the measure still needs to be dark when in warning state
-  --#{$progress}--m-inside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-outside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-sm__bar--Height: var(--#{$pf-global}--spacer--sm);
-  --#{$progress}--m-sm__description--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-sm__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-lg__bar--Height: var(--#{$pf-global}--spacer--lg);
-
-  // Component styles
+  --#{$progress}--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --#{$progress}--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --#{$progress}--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --#{$progress}--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$progress}--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$progress}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$progress}--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
+  --#{$progress}--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
+  --#{$progress}--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --#{$progress}--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --#{$progress}--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --#{$progress}--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$progress}--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$progress}--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
+  --#{$progress}--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$progress}--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
+}
+
+.#{$progress} {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: auto auto;
@@ -44,11 +44,7 @@
   // Modifiers
   // size modifiers
   &.pf-m-sm {
-    --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height); // set height to the small height
-
-    .#{$progress}__description {
-      font-size: var(--#{$progress}--m-sm__description--FontSize);
-    }
+    --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height);
 
     .#{$progress}__measure {
       font-size: var(--#{$progress}--m-sm__measure--FontSize);
@@ -56,7 +52,7 @@
   }
 
   &.pf-m-lg {
-    --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height); // set height to the large height
+    --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height);
   }
 
   // an inside-style progress component shows the measure inside the indicator
@@ -93,7 +89,7 @@
 
       &.pf-m-static-width {
         min-width: var(--#{$progress}__measure--m-static-width--MinWidth);
-        text-align: left;
+        text-align: start;
       }
     }
 
@@ -129,20 +125,21 @@
 
   // status modifiers
   &.pf-m-success {
-    --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-success__bar--BackgroundColor);
+    --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-success__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-success__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-success--m-inside__measure--Color);
   }
 
   &.pf-m-warning {
-    --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-warning__bar--BackgroundColor);
+    --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-warning__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-warning__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-warning--m-inside__measure--Color);
   }
-
+  
   &.pf-m-danger {
-    --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-danger__bar--BackgroundColor);
+    --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
+    --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
   }
 }
 
@@ -166,7 +163,7 @@
   gap: var(--#{$progress}__status--Gap);
   align-items: flex-start;
   justify-content: flex-end;
-  text-align: right;
+  text-align: end;
   word-break: break-word;
 }
 
@@ -175,6 +172,15 @@
   color: var(--#{$progress}__status-icon--Color);
 }
 
+.#{$progress}__bar::before,
+.#{$progress}__indicator {
+  // disable linter as the indicator element should always grow ltr
+  // stylelint-disable liberty/use-logical-spec
+  top: 0;
+  left: 0;
+  // stylelint-enable
+}
+
 // The progress__bar is a white underlay with a semi-transparent color on top, which matches the progress__indicator color
 .#{$progress}__bar {
   position: relative;
@@ -183,25 +189,12 @@
   align-self: center;
   height: var(--#{$progress}__bar--Height);
   background-color: var(--#{$progress}__bar--BackgroundColor);
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-    background-color: var(--#{$progress}__bar--before--BackgroundColor);
-    opacity: var(--#{$progress}__bar--before--Opacity);
-  }
 }
 
 // the progress__indicator is the part that advances (widens) as progress is made
 // It is assumed that the width of the progress__indicator is set inline or via Javascript
 .#{$progress}__indicator {
   position: absolute; // position absolute to bring above the semi-transparent bar overlay
-  top: 0;
-  left: 0;
   height: var(--#{$progress}__indicator--Height);
   background-color: var(--#{$progress}__indicator--BackgroundColor);
 }
@@ -209,12 +202,5 @@
 .#{$progress}__helper-text {
   grid-row: 3 / 4;
   grid-column: 1 / 3;
-  margin-top: var(--#{$progress}__helper-text--MarginTop);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/progress";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-progress;
+  margin-block-start: var(--#{$progress}__helper-text--MarginTop);
 }

package/components/ProgressStepper/progress-stepper.css

@@ -17,7 +17,9 @@
   --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
+  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
+  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
   --pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow: column;
@@ -57,7 +59,7 @@
   --pf-v5-c-progress-stepper--m-center__step-description--MarginRight: 0;
   --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-v5-c-progress-stepper--GridTemplateRows: auto 1fr;
-  --pf-v5-c-progress-stepper__step-connector--JustifyContent: start;
+  --pf-v5-c-progress-stepper__step-connector--JustifyContent: flex-start;
   --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-progress-stepper__step-icon--Width: 1.75rem;
   --pf-v5-c-progress-stepper__step-icon--Height: var(--pf-v5-c-progress-stepper__step-icon--Width);
@@ -69,7 +71,7 @@
   --pf-v5-c-progress-stepper__pficon--MarginTop: 3px;
   --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
   --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step-title--TextAlign: left;
+  --pf-v5-c-progress-stepper__step-title--TextAlign: start;
   --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
@@ -91,7 +93,7 @@
   --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-progress-stepper__step-description--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-progress-stepper__step-description--TextAlign: left;
+  --pf-v5-c-progress-stepper__step-description--TextAlign: start;
   --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow);
   --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns);
   --pf-v5-c-progress-stepper__step-connector--before--Top: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top);
@@ -160,7 +162,7 @@
   position: relative;
 }
 .pf-v5-c-progress-stepper.pf-m-center .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-connector::before {
-  left: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Left);
+  inset-inline-start: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Left);
 }
 .pf-v5-c-progress-stepper.pf-m-center:not(.pf-m-compact) .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-main::before {
   content: var(--pf-v5-c-progress-stepper--m-center__step-main--before--Content);
@@ -177,8 +179,9 @@
   --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-c-progress-stepper--m-compact__step-title--FontWeight);
   --pf-v5-c-progress-stepper__pficon--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__pficon--MarginTop);
   --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
-  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop);
   --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
   display: inline-grid;
   grid-template-columns: var(--pf-v5-c-progress-stepper--m-compact--GridTemplateColumns);
   grid-auto-flow: var(--pf-v5-c-progress-stepper--m-compact--GridAutoFlow);
@@ -186,15 +189,15 @@
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step-connector {
   grid-row: var(--pf-v5-c-progress-stepper--m-compact__step-connector--GridRow);
   min-width: var(--pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth);
-  padding-bottom: var(--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom);
 }
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step-main {
-  margin-bottom: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom);
+  margin-block-end: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom);
 }
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step:not(.pf-m-current) .pf-v5-c-progress-stepper__step-main {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -248,13 +251,13 @@
 }
 .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-connector::before {
   position: absolute;
-  top: var(--pf-v5-c-progress-stepper__step-connector--before--Top);
-  left: var(--pf-v5-c-progress-stepper__step-connector--before--Left);
+  inset-block-start: var(--pf-v5-c-progress-stepper__step-connector--before--Top);
+  inset-inline-start: var(--pf-v5-c-progress-stepper__step-connector--before--Left);
   width: var(--pf-v5-c-progress-stepper__step-connector--before--Width);
   height: var(--pf-v5-c-progress-stepper__step-connector--before--Height);
   content: "";
-  border-right: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
-  border-bottom: var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor);
+  border-inline-end: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
   transform: var(--pf-v5-c-progress-stepper__step-connector--before--Transform);
 }
 
@@ -272,25 +275,28 @@
   border-radius: 50%;
 }
 .pf-v5-c-progress-stepper__step-icon .pf-v5-pficon {
-  margin-top: var(--pf-v5-c-progress-stepper__pficon--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress-stepper__pficon--MarginTop);
 }
 .pf-v5-c-progress-stepper__step-icon .fa-exclamation-triangle {
-  margin-top: var(--pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop);
 }
 
 .pf-v5-c-progress-stepper__step-main {
   min-width: 0;
-  margin: var(--pf-v5-c-progress-stepper__step-main--MarginTop) var(--pf-v5-c-progress-stepper__step-main--MarginRight) var(--pf-v5-c-progress-stepper__step-main--MarginBottom) var(--pf-v5-c-progress-stepper__step-main--MarginLeft);
+  margin-block-start: var(--pf-v5-c-progress-stepper__step-main--MarginTop);
+  margin-block-end: var(--pf-v5-c-progress-stepper__step-main--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-progress-stepper__step-main--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-progress-stepper__step-main--MarginRight);
   text-align: var(--pf-v5-c-progress-stepper--step-main--TextAlign, auto);
   overflow-wrap: anywhere;
 }
 .pf-v5-c-progress-stepper__step:not(:last-of-type) > .pf-v5-c-progress-stepper__step-main::before {
   position: absolute;
-  top: calc(100% + var(--pf-v5-c-progress-stepper__step-main--MarginTop));
-  left: calc(50% - var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
+  inset-block-start: calc(100% + var(--pf-v5-c-progress-stepper__step-main--MarginTop));
+  inset-inline-start: calc(50% - var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
   width: auto;
   height: calc(var(--pf-v5-c-progress-stepper__step-main--MarginTop) + var(--pf-v5-c-progress-stepper__step-main--MarginBottom));
-  border-right: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
+  border-inline-end: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor);
 }
 
 .pf-v5-c-progress-stepper__step-title {
@@ -319,7 +325,7 @@
 }
 
 .pf-v5-c-progress-stepper__step-description {
-  margin-top: var(--pf-v5-c-progress-stepper__step-description--MarginTop);
+  margin-block-start: var(--pf-v5-c-progress-stepper__step-description--MarginTop);
   font-size: var(--pf-v5-c-progress-stepper__step-description--FontSize);
   color: var(--pf-v5-c-progress-stepper__step-description--Color);
   text-align: var(--pf-v5-c-progress-stepper__step-description--TextAlign);

package/components/ProgressStepper/progress-stepper.scss

@@ -79,7 +79,9 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns: 1fr;
   --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow: auto;
+  --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginTop: 0;
   --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight: 0;
+  --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft: 0;
 
   // Center, vertical
   --#{$progress-stepper}--m-vertical--m-center__step-main--MarginRight: 0;
@@ -133,7 +135,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--GridTemplateRows: auto 1fr;
 
   // Step connector variables
-  --#{$progress-stepper}__step-connector--JustifyContent: start;
+  --#{$progress-stepper}__step-connector--JustifyContent: flex-start;
 
   // Step icon variables
   --#{$progress-stepper}__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs);
@@ -151,7 +153,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   // Step Title variables
   --#{$progress-stepper}__step-title--Color: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step-title--TextAlign: left;
+  --#{$progress-stepper}__step-title--TextAlign: start;
   --#{$progress-stepper}__step-title--FontSize: var(--#{$pf-global}--FontSize--md);
   --#{$progress-stepper}__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
@@ -179,7 +181,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}__step-description--MarginTop: var(--#{$pf-global}--spacer--xs);
   --#{$progress-stepper}__step-description--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$progress-stepper}__step-description--Color: var(--#{$pf-global}--Color--200);
-  --#{$progress-stepper}__step-description--TextAlign: left;
+  --#{$progress-stepper}__step-description--TextAlign: start;
 
   // Vertical by default
   @include pf-v5-c-progress-stepper--m-vertical;
@@ -216,7 +218,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     }
 
     .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-connector::before {
-      left: var(--#{$progress-stepper}--m-center__step-connector--before--Left);
+     inset-inline-start: var(--#{$progress-stepper}--m-center__step-connector--before--Left);
     }
 
     // If not compact variant, swap borders from connector to main
@@ -240,8 +242,9 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$progress-stepper}--m-compact__step-title--FontWeight);
     --#{$progress-stepper}__pficon--MarginTop: var(--#{$progress-stepper}--m-compact__pficon--MarginTop);
     --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: var(--#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop);
-    --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft);
+    --#{$progress-stepper}--m-vertical__step-main--MarginTop: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginTop);
     --#{$progress-stepper}--m-vertical__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight);
+    --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft);
 
     display: inline-grid;
     grid-template-columns: var(--#{$progress-stepper}--m-compact--GridTemplateColumns);
@@ -250,11 +253,11 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     .#{$progress-stepper}__step-connector {
       grid-row: var(--#{$progress-stepper}--m-compact__step-connector--GridRow);
       min-width: var(--#{$progress-stepper}--m-compact__step-connector--MinWidth);
-      padding-bottom: var(--#{$progress-stepper}--m-compact__step-connector--PaddingBottom);
+      padding-block-end: var(--#{$progress-stepper}--m-compact__step-connector--PaddingBottom);
     }
 
     .#{$progress-stepper}__step-main {
-      margin-bottom: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom);
+      margin-block-end: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom);
     }
 
     .#{$progress-stepper}__step:not(.pf-m-current) .#{$progress-stepper}__step-main {
@@ -327,13 +330,13 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   .#{$progress-stepper}__step:not(:last-of-type) > &::before {
     position: absolute;
-    top: var(--#{$progress-stepper}__step-connector--before--Top); // half the height
-    left: var(--#{$progress-stepper}__step-connector--before--Left);
+    inset-block-start: var(--#{$progress-stepper}__step-connector--before--Top); // half the height
+    inset-inline-start: var(--#{$progress-stepper}__step-connector--before--Left);
     width: var(--#{$progress-stepper}__step-connector--before--Width);
     height: var(--#{$progress-stepper}__step-connector--before--Height);
     content: "";
-    border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
-    border-bottom: var(--#{$progress-stepper}__step-connector--before--BorderBottomWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderBottomColor);
+    border-block-end: var(--#{$progress-stepper}__step-connector--before--BorderBottomWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderBottomColor);
+    border-inline-end: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
     transform: var(--#{$progress-stepper}__step-connector--before--Transform);
   }
 }
@@ -355,12 +358,12 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   // Align pficons with the font awesome icons
   // stylelint-disable
   .pf-v5-pficon {
-    margin-top: var(--#{$progress-stepper}__pficon--MarginTop);
+    margin-block-start: var(--#{$progress-stepper}__pficon--MarginTop);
   }
 
   // Push the triangle up to fit inside the circle
   .fa-exclamation-triangle {
-    margin-top: var(--#{$progress-stepper}__fa-exclamation-triangle--MarginTop);
+    margin-block-start: var(--#{$progress-stepper}__fa-exclamation-triangle--MarginTop);
   }
   // stylelint-enable
 }
@@ -368,18 +371,21 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 // Step main
 .#{$progress-stepper}__step-main {
   min-width: 0;
-  margin: var(--#{$progress-stepper}__step-main--MarginTop) var(--#{$progress-stepper}__step-main--MarginRight) var(--#{$progress-stepper}__step-main--MarginBottom) var(--#{$progress-stepper}__step-main--MarginLeft);
+  margin-block-start: var(--#{$progress-stepper}__step-main--MarginTop);
+  margin-block-end: var(--#{$progress-stepper}__step-main--MarginBottom);
+  margin-inline-start: var(--#{$progress-stepper}__step-main--MarginLeft);
+  margin-inline-end: var(--#{$progress-stepper}__step-main--MarginRight);
   text-align: var(--#{$progress-stepper}--step-main--TextAlign, auto);
   overflow-wrap: anywhere;
 
   // Draw a new border for vertical alignment using step main
   .#{$progress-stepper}__step:not(:last-of-type) > &::before {
     position: absolute;
-    top: calc(100% + var(--#{$progress-stepper}__step-main--MarginTop));
-    left: calc(50% - calc(var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) / 2));
+    inset-block-start: calc(100% + var(--#{$progress-stepper}__step-main--MarginTop));
+    inset-inline-start: calc(50% - calc(var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) / 2));
     width: auto;
     height: calc(var(--#{$progress-stepper}__step-main--MarginTop) + var(--#{$progress-stepper}__step-main--MarginBottom));
-    border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
+    border-inline-end: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
   }
 }
 
@@ -389,7 +395,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   font-weight: var(--#{$progress-stepper}__step-title--FontWeight);
   color: var(--#{$progress-stepper}__step-title--Color);
   text-align: var(--#{$progress-stepper}__step-title--TextAlign);
-  background:none;
+  background: none;
   border: 0;
 
   &.pf-m-help-text {
@@ -414,7 +420,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
 // Step description
 .#{$progress-stepper}__step-description {
-  margin-top: var(--#{$progress-stepper}__step-description--MarginTop);
+  margin-block-start: var(--#{$progress-stepper}__step-description--MarginTop);
   font-size: var(--#{$progress-stepper}__step-description--FontSize);
   color: var(--#{$progress-stepper}__step-description--Color);
   text-align: var(--#{$progress-stepper}__step-description--TextAlign);