@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.31

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);

package/components/Radio/radio.css

@@ -5,7 +5,8 @@
   --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-radio__input--TranslateY--moz: 5px;
+  --pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
+  --pf-v5-c-radio__input--TranslateY--moz: var(--pf-v5-c-radio__input--TranslateY);
   --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
   --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -18,25 +19,27 @@
 }
 .pf-v5-c-radio.pf-m-standalone {
   --pf-v5-c-radio--GridGap: 0;
-  --pf-v5-c-radio__input--TranslateY--moz: 0;
-  width: auto;
-}
-
-.pf-v5-c-radio__label {
-  font-size: var(--pf-v5-c-radio__label--FontSize);
-  font-weight: var(--pf-v5-c-radio__label--FontWeight);
-  line-height: var(--pf-v5-c-radio__label--LineHeight);
-  color: var(--pf-v5-c-radio__label--Color);
+  --pf-v5-c-radio__input--TranslateY: none;
+  display: inline-grid;
 }
 
 .pf-v5-c-radio__input {
+  align-self: start;
   -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
+  transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
 }
 .pf-v5-c-radio__input:first-child {
-  margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-radio__input--first-child--MarginLeft);
 }
 .pf-v5-c-radio__input:last-child {
-  margin-right: var(--pf-v5-c-radio__input--last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-radio__input--last-child--MarginRight);
+}
+
+.pf-v5-c-radio__label {
+  font-size: var(--pf-v5-c-radio__label--FontSize);
+  font-weight: var(--pf-v5-c-radio__label--FontWeight);
+  line-height: var(--pf-v5-c-radio__label--LineHeight);
+  color: var(--pf-v5-c-radio__label--Color);
 }
 
 .pf-v5-c-radio__description {
@@ -47,7 +50,7 @@
 
 .pf-v5-c-radio__body {
   grid-column: 2;
-  margin-top: var(--pf-v5-c-radio__body--MarginTop);
+  margin-block-start: var(--pf-v5-c-radio__body--MarginTop);
 }
 
 .pf-v5-c-radio__label,

package/components/Radio/radio.scss

@@ -7,7 +7,8 @@
   --#{$radio}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$radio}__label--FontSize: var(--#{$pf-global}--FontSize--md);
   --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$radio}__input--TranslateY--moz: 5px;
+  --#{$radio}__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
+  --#{$radio}__input--TranslateY--moz: var(--#{$radio}__input--TranslateY); // remove at breaking change
   --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
   --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --#{$radio}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
@@ -21,35 +22,40 @@
 
   &.pf-m-standalone {
     --#{$radio}--GridGap: 0;
-    --#{$radio}__input--TranslateY--moz: 0;
+    --#{$radio}__input--TranslateY: none;
 
-    width: auto;
+    display: inline-grid;
   }
 }
 
-.#{$radio}__label {
-  font-size: var(--#{$radio}__label--FontSize);
-  font-weight: var(--#{$radio}__label--FontWeight);
-  line-height: var(--#{$radio}__label--LineHeight);
-  color: var(--#{$radio}__label--Color);
-}
-
 .#{$radio}__input {
+  align-self: start;
+
   // stylelint-disable property-no-vendor-prefix
-  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz));
+  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz)); // remove at breaking change - no longer needed
   // stylelint-enable
 
+  // find height of single label, divide by two, offset by 50% of own height
+  transform: translateY(var(--#{$radio}__input--TranslateY));
+
   // fixes a chrome issue where the left edge is cut off in a container with overflow hidden
   &:first-child {
-    margin-left: var(--#{$radio}__input--first-child--MarginLeft);
+    margin-inline-start: var(--#{$radio}__input--first-child--MarginLeft);
   }
 
   // fixes a chrome issue where the right edge is cut off in a container with overflow hidden
   &:last-child {
-    margin-right: var(--#{$radio}__input--last-child--MarginRight);
+    margin-inline-end: var(--#{$radio}__input--last-child--MarginRight);
   }
 }
 
+.#{$radio}__label {
+  font-size: var(--#{$radio}__label--FontSize);
+  font-weight: var(--#{$radio}__label--FontWeight);
+  line-height: var(--#{$radio}__label--LineHeight);
+  color: var(--#{$radio}__label--Color);
+}
+
 .#{$radio}__description {
   grid-column: 2;
   font-size: var(--#{$radio}__description--FontSize);
@@ -58,7 +64,7 @@
 
 .#{$radio}__body {
   grid-column: 2;
-  margin-top: var(--#{$radio}__body--MarginTop);
+  margin-block-start: var(--#{$radio}__body--MarginTop);
 }
 
 .#{$radio}__label,

package/components/Select/select.css

@@ -172,8 +172,8 @@
   width: 100%;
 }
 .pf-v5-c-select .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-select-menu--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-select-menu--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-select-menu--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-select-menu--c-divider--MarginBottom);
 }
 .pf-v5-c-select .pf-v5-c-divider:last-child {
   --pf-v5-c-select-menu--c-divider--MarginBottom: 0;
@@ -217,7 +217,10 @@
   justify-content: space-between;
   width: 100%;
   min-width: var(--pf-v5-c-select__toggle--MinWidth);
-  padding: var(--pf-v5-c-select__toggle--PaddingTop) var(--pf-v5-c-select__toggle--PaddingRight) var(--pf-v5-c-select__toggle--PaddingBottom) var(--pf-v5-c-select__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-select__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-select__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-select__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-select__toggle--PaddingRight);
   font-size: var(--pf-v5-c-select__toggle--FontSize);
   font-weight: var(--pf-v5-c-select__toggle--FontWeight);
   line-height: var(--pf-v5-c-select__toggle--LineHeight);
@@ -237,14 +240,14 @@
 .pf-v5-c-select__toggle::before {
   --pf-v5-c-select__toggle--before--BorderWidth-base: var(--pf-v5-c-select__toggle--before--BorderTopWidth) var(--pf-v5-c-select__toggle--before--BorderRightWidth) var(--pf-v5-c-select__toggle--before--BorderBottomWidth) var(--pf-v5-c-select__toggle--before--BorderLeftWidth);
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   content: "";
-  border-color: var(--pf-v5-c-select__toggle--before--BorderTopColor) var(--pf-v5-c-select__toggle--before--BorderRightColor) var(--pf-v5-c-select__toggle--before--BorderBottomColor) var(--pf-v5-c-select__toggle--before--BorderLeftColor);
   border-style: solid;
   border-width: var(--pf-v5-c-select__toggle--before--BorderWidth, var(--pf-v5-c-select__toggle--before--BorderWidth-base));
+  border-block-start-color: var(--pf-v5-c-select__toggle--before--BorderTopColor);
+  border-block-end-color: var(--pf-v5-c-select__toggle--before--BorderBottomColor);
+  border-inline-start-color: var(--pf-v5-c-select__toggle--before--BorderLeftColor);
+  border-inline-end-color: var(--pf-v5-c-select__toggle--before--BorderRightColor);
 }
 .pf-v5-c-select__toggle:hover {
   --pf-v5-c-select__toggle--before--BorderBottomColor: var(--pf-v5-c-select__toggle--hover--before--BorderBottomColor);
@@ -283,15 +286,15 @@
   position: relative;
 }
 .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
-  padding-right: var(--pf-v5-c-select__toggle-clear--PaddingRight);
-  padding-left: var(--pf-v5-c-select__toggle-clear--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--pf-v5-c-select__toggle-clear--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-select__toggle-clear--PaddingRight);
+  margin-inline-start: auto;
 }
 .pf-v5-c-select__toggle .pf-v5-c-select__toggle-button {
   color: var(--pf-v5-c-select__toggle-button--Color);
 }
 .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear + .pf-v5-c-select__toggle-button {
-  padding-left: var(--pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft);
 }
 .pf-v5-c-select__toggle.pf-m-placeholder {
   --pf-v5-c-select__toggle-text--Color: var(--pf-v5-c-select__toggle--m-placeholder__toggle-text--Color);
@@ -301,8 +304,8 @@
   color: var(--pf-v5-c-select__toggle-arrow--Color, inherit);
 }
 * + .pf-v5-c-select__toggle-arrow {
-  margin-right: var(--pf-v5-c-select__toggle-arrow--MarginRight);
-  margin-left: var(--pf-v5-c-select__toggle-arrow--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-select__toggle-arrow--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-select__toggle-arrow--MarginRight);
 }
 .pf-v5-c-select.pf-m-top.pf-m-expanded .pf-v5-c-select__toggle-arrow {
   transform: rotate(var(--pf-v5-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
@@ -326,28 +329,28 @@
   white-space: normal;
 }
 .pf-v5-c-select__toggle-wrapper > :not(:last-child) {
-  margin-right: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
 }
 .pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
-  margin-top: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
-  margin-bottom: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
+  margin-block-start: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
+  margin-block-end: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
 }
 .pf-v5-c-select__toggle-wrapper > .pf-v5-c-select__toggle-typeahead:first-child {
-  margin-left: calc(-1 * var(--pf-v5-c-select__toggle--PaddingLeft));
+  margin-inline-start: calc(-1 * var(--pf-v5-c-select__toggle--PaddingLeft));
 }
 
 .pf-v5-c-select__toggle-icon + .pf-v5-c-select__toggle-text {
-  margin-left: var(--pf-v5-c-select__toggle-icon--toggle-text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-select__toggle-icon--toggle-text--MarginLeft);
 }
 
 .pf-v5-c-select__toggle-status-icon {
-  margin-left: var(--pf-v5-c-select__toggle-status-icon--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-select__toggle-status-icon--MarginLeft);
   color: var(--pf-v5-c-select__toggle-status-icon--Color);
 }
 
 .pf-v5-c-select__toggle-badge {
   display: flex;
-  padding-left: var(--pf-v5-c-select__toggle-badge--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-select__toggle-badge--PaddingLeft);
 }
 
 .pf-v5-c-select__toggle-typeahead {
@@ -365,30 +368,27 @@
 
 .pf-v5-c-select__menu {
   position: absolute;
-  top: var(--pf-v5-c-select__menu--Top);
+  inset-block-start: var(--pf-v5-c-select__menu--Top);
   z-index: var(--pf-v5-c-select__menu--ZIndex);
   width: var(--pf-v5-c-select__menu--Width);
   min-width: var(--pf-v5-c-select__menu--MinWidth);
-  padding-top: var(--pf-v5-c-select__menu--PaddingTop);
-  padding-bottom: var(--pf-v5-c-select__menu--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-select__menu--PaddingTop);
+  padding-block-end: var(--pf-v5-c-select__menu--PaddingBottom);
   background-color: var(--pf-v5-c-select__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v5-c-select__menu--BoxShadow);
 }
 .pf-v5-c-select__menu.pf-m-align-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-select.pf-m-top .pf-v5-c-select__menu {
-  top: 0;
+  inset-block-start: 0;
   transform: translateY(var(--pf-v5-c-select__menu--m-top--TranslateY));
 }
 .pf-v5-c-select__menu.pf-m-static {
   --pf-v5-c-select__menu--m-top--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -409,12 +409,15 @@
 .pf-v5-c-select__menu-item {
   position: relative;
   width: var(--pf-v5-c-select__menu-item--Width);
-  padding: var(--pf-v5-c-select__menu-item--PaddingTop) var(--pf-v5-c-select__menu-item--PaddingRight) var(--pf-v5-c-select__menu-item--PaddingBottom) var(--pf-v5-c-select__menu-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-select__menu-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-select__menu-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-select__menu-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-select__menu-item--PaddingRight);
   font-size: var(--pf-v5-c-select__menu-item--FontSize);
   font-weight: var(--pf-v5-c-select__menu-item--FontWeight);
   line-height: var(--pf-v5-c-select__menu-item--LineHeight);
   color: var(--pf-v5-c-select__menu-item--Color);
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   background-color: transparent;
   border: none;
@@ -495,14 +498,14 @@
 }
 
 .pf-v5-c-select__list-item.pf-m-loading {
-  padding-top: var(--pf-v5-c-select__list-item--m-loading--PaddingTop);
+  padding-block-start: var(--pf-v5-c-select__list-item--m-loading--PaddingTop);
   text-align: center;
 }
 
 .pf-v5-c-select__menu-item-main {
   position: relative;
   display: block;
-  padding-right: var(--pf-v5-c-select__menu-item-main--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-select__menu-item-main--PaddingRight);
   white-space: nowrap;
 }
 
@@ -516,22 +519,22 @@
 
 .pf-v5-c-select__menu-item-count {
   align-self: center;
-  margin-left: var(--pf-v5-c-select__menu-item-count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-select__menu-item-count--MarginLeft);
   font-size: var(--pf-v5-c-select__menu-item-count--FontSize);
   color: var(--pf-v5-c-select__menu-item-count--Color);
 }
 
 .pf-v5-c-select__menu-item-description {
   display: block;
-  padding-right: var(--pf-v5-c-select__menu-item-description--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-select__menu-item-description--PaddingRight);
   font-size: var(--pf-v5-c-select__menu-item-description--FontSize);
   color: var(--pf-v5-c-select__menu-item-description--Color);
 }
 
 .pf-v5-c-select__menu-item-icon {
   position: absolute;
-  top: var(--pf-v5-c-select__menu-item-icon--Top);
-  right: var(--pf-v5-c-select__menu-item-icon--Right);
+  inset-block-start: var(--pf-v5-c-select__menu-item-icon--Top);
+  inset-inline-end: var(--pf-v5-c-select__menu-item-icon--Right);
   font-size: var(--pf-v5-c-select__menu-item-icon--FontSize);
   color: var(--pf-v5-c-select__menu-item-icon--Color);
   transform: translateY(var(--pf-v5-c-select__menu-item-icon--TranslateY));
@@ -549,27 +552,33 @@
 }
 
 .pf-v5-c-select__menu-group + .pf-v5-c-select__menu-group {
-  padding-top: var(--pf-v5-c-select__menu-group--menu-group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-select__menu-group--menu-group--PaddingTop);
 }
 
 .pf-v5-c-select__menu-search {
-  padding: var(--pf-v5-c-select__menu-search--PaddingTop) var(--pf-v5-c-select__menu-search--PaddingRight) var(--pf-v5-c-select__menu-search--PaddingBottom) var(--pf-v5-c-select__menu-search--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-select__menu-search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-select__menu-search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-select__menu-search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-select__menu-search--PaddingRight);
 }
 
 .pf-v5-c-select__menu-group-title {
-  padding-top: var(--pf-v5-c-select__menu-group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-select__menu-group-title--PaddingRight);
-  padding-bottom: var(--pf-v5-c-select__menu-group-title--PaddingBottom);
-  padding-left: var(--pf-v5-c-select__menu-group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-select__menu-group-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-select__menu-group-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-select__menu-group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-select__menu-group-title--PaddingRight);
   font-size: var(--pf-v5-c-select__menu-group-title--FontSize);
   font-weight: var(--pf-v5-c-select__menu-group-title--FontWeight);
   color: var(--pf-v5-c-select__menu-group-title--Color);
 }
 
 .pf-v5-c-select__menu-footer {
-  padding: var(--pf-v5-c-select__menu-footer--PaddingTop) var(--pf-v5-c-select__menu-footer--PaddingRight) var(--pf-v5-c-select__menu-footer--PaddingBottom) var(--pf-v5-c-select__menu-footer--PaddingLeft);
-  margin-top: var(--pf-v5-c-select__menu-footer--MarginTop);
-  margin-bottom: var(--pf-v5-c-select__menu-footer--MarginBottom);
+  padding-block-start: var(--pf-v5-c-select__menu-footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-select__menu-footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-select__menu-footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-select__menu-footer--PaddingRight);
+  margin-block-start: var(--pf-v5-c-select__menu-footer--MarginTop);
+  margin-block-end: var(--pf-v5-c-select__menu-footer--MarginBottom);
   box-shadow: var(--pf-v5-c-select__menu-footer--BoxShadow);
 }