@patternfly/patternfly 5.0.2 → 5.1.0-prerelease.10

package/components/Alert/alert.scss

@@ -122,10 +122,13 @@
   display: grid;
   grid-template-areas: var(--#{$alert}--GridTemplateAreas);
   grid-template-columns: var(--#{$alert}--GridTemplateColumns);
-  padding: var(--#{$alert}--PaddingTop) var(--#{$alert}--PaddingRight) var(--#{$alert}--PaddingBottom) var(--#{$alert}--PaddingLeft);
+  padding-block-start: var(--#{$alert}--PaddingTop);
+  padding-block-end: var(--#{$alert}--PaddingBottom);
+  padding-inline-start: var(--#{$alert}--PaddingLeft);
+  padding-inline-end: var(--#{$alert}--PaddingRight);
   font-size: var(--#{$alert}__FontSize);
   background-color: var(--#{$alert}--BackgroundColor);
-  border-top: var(--#{$alert}--BorderTopWidth) solid var(--#{$alert}--BorderTopColor);
+  border-block-start: var(--#{$alert}--BorderTopWidth) solid var(--#{$alert}--BorderTopColor);
   box-shadow: var(--#{$alert}--BoxShadow);
 
   &.pf-m-custom {
@@ -190,9 +193,9 @@
 }
 
 .#{$alert}__toggle {
-  margin-top: var(--#{$alert}__toggle--MarginTop);
-  margin-bottom: var(--#{$alert}__toggle--MarginBottom);
-  margin-left: var(--#{$alert}__toggle--MarginLeft);
+  margin-block-start: var(--#{$alert}__toggle--MarginTop);
+  margin-block-end: var(--#{$alert}__toggle--MarginBottom);
+  margin-inline-start: var(--#{$alert}__toggle--MarginLeft);
 }
 
 .#{$alert}__toggle-icon {
@@ -204,8 +207,8 @@
 .#{$alert}__icon {
   display: flex;
   grid-area: icon;
-  margin-top: var(--#{$alert}__icon--MarginTop);
-  margin-right: var(--#{$alert}__icon--MarginRight);
+  margin-block-start: var(--#{$alert}__icon--MarginTop);
+  margin-inline-end: var(--#{$alert}__icon--MarginRight);
   font-size: var(--#{$alert}__icon--FontSize);
   color: var(--#{$alert}__icon--Color);
 }
@@ -223,7 +226,7 @@
 
 .#{$alert}__description {
   grid-area: description;
-  padding-top: var(--#{$alert}__description--PaddingTop);
+  padding-block-start: var(--#{$alert}__description--PaddingTop);
   word-break: break-word;
 
   + .#{$alert}__action-group {
@@ -233,9 +236,9 @@
 
 .#{$alert}__action {
   grid-area: action;
-  margin-top: var(--#{$alert}__action--MarginTop);
-  margin-right: var(--#{$alert}__action--MarginRight);
-  margin-bottom: var(--#{$alert}__action--MarginBottom);
+  margin-block-start: var(--#{$alert}__action--MarginTop);
+  margin-block-end: var(--#{$alert}__action--MarginBottom);
+  margin-inline-end: var(--#{$alert}__action--MarginRight);
   transform: translateY(var(--#{$alert}__action--TranslateY));
 
   > .#{$button} {
@@ -245,13 +248,13 @@
 
 .#{$alert}__action-group {
   grid-area: actiongroup;
-  padding-top: var(--#{$alert}__action-group--PaddingTop);
+  padding-block-start: var(--#{$alert}__action-group--PaddingTop);
 
   > .#{$button} {
     --#{$button}--m-link--m-inline--hover--TextDecoration: none;
 
     &:not(:last-child) {
-      margin-right: var(--#{$alert}__action-group__c-button--not-last-child--MarginRight);
+      margin-inline-end: var(--#{$alert}__action-group__c-button--not-last-child--MarginRight);
     }
   }
 }

package/components/AppLauncher/app-launcher.css

@@ -70,15 +70,18 @@
   color: var(--pf-v5-c-app-launcher__toggle--m-expanded--Color);
 }
 .pf-v5-c-app-launcher .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-app-launcher--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-app-launcher--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-app-launcher--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-app-launcher--c-divider--MarginBottom);
 }
 .pf-v5-c-app-launcher .pf-v5-c-divider:last-child {
   --pf-v5-c-app-launcher--c-divider--MarginBottom: 0;
 }
 
 .pf-v5-c-app-launcher__toggle {
-  padding: var(--pf-v5-c-app-launcher__toggle--PaddingTop) var(--pf-v5-c-app-launcher__toggle--PaddingRight) var(--pf-v5-c-app-launcher__toggle--PaddingBottom) var(--pf-v5-c-app-launcher__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__toggle--PaddingRight);
   color: var(--pf-v5-c-app-launcher__toggle--Color);
   background-color: var(--pf-v5-c-app-launcher__toggle--BackgroundColor);
   border: none;
@@ -99,17 +102,17 @@
 
 .pf-v5-c-app-launcher__menu {
   position: absolute;
-  top: var(--pf-v5-c-app-launcher__menu--Top);
+  inset-block-start: var(--pf-v5-c-app-launcher__menu--Top);
   z-index: var(--pf-v5-c-app-launcher__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--pf-v5-c-app-launcher__menu--PaddingTop);
-  padding-bottom: var(--pf-v5-c-app-launcher__menu--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu--PaddingBottom);
   background-color: var(--pf-v5-c-app-launcher__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v5-c-app-launcher__menu--BoxShadow);
 }
 .pf-v5-c-app-launcher__menu.pf-m-align-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-app-launcher.pf-m-top .pf-v5-c-app-launcher__menu {
   --pf-v5-c-app-launcher__menu--Top: var(--pf-v5-c-app-launcher--m-top__menu--Top);
@@ -118,18 +121,21 @@
 .pf-v5-c-app-launcher__menu.pf-m-static {
   --pf-v5-c-app-launcher--m-top__menu--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }
 
 .pf-v5-c-app-launcher__menu-search {
-  padding: var(--pf-v5-c-app-launcher__menu-search--PaddingTop) var(--pf-v5-c-app-launcher__menu-search--PaddingRight) var(--pf-v5-c-app-launcher__menu-search--PaddingBottom) var(--pf-v5-c-app-launcher__menu-search--PaddingLeft);
-  margin-bottom: var(--pf-v5-c-app-launcher__menu-search--MarginBottom);
-  border-bottom: var(--pf-v5-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-v5-c-app-launcher__menu-search--BottomBorderColor);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu-search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu-search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__menu-search--PaddingRight);
+  margin-block-end: var(--pf-v5-c-app-launcher__menu-search--MarginBottom);
+  border-block-end: var(--pf-v5-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-v5-c-app-launcher__menu-search--BottomBorderColor);
 }
 
 .pf-v5-c-app-launcher__menu-wrapper {
@@ -144,7 +150,10 @@
   display: flex;
   align-items: center;
   width: var(--pf-v5-c-app-launcher__menu-item--Width);
-  padding: var(--pf-v5-c-app-launcher__menu-item--PaddingTop) var(--pf-v5-c-app-launcher__menu-item--PaddingRight) var(--pf-v5-c-app-launcher__menu-item--PaddingBottom) var(--pf-v5-c-app-launcher__menu-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__menu-item--PaddingRight);
   font-weight: var(--pf-v5-c-app-launcher__menu-item--FontWeight);
   color: var(--pf-v5-c-app-launcher__menu-item--Color);
   white-space: nowrap;
@@ -194,7 +203,7 @@
   justify-content: center;
   width: var(--pf-v5-c-app-launcher__menu-item-icon--Width);
   height: var(--pf-v5-c-app-launcher__menu-item-icon--Height);
-  margin-right: var(--pf-v5-c-app-launcher__menu-item-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-app-launcher__menu-item-icon--MarginRight);
 }
 .pf-v5-c-app-launcher__menu-item-icon > * {
   max-width: 100%;
@@ -202,8 +211,8 @@
 }
 
 .pf-v5-c-app-launcher__menu-item-external-icon {
-  padding-left: var(--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--pf-v5-c-app-launcher__menu-item-external-icon--FontSize);
   color: var(--pf-v5-c-app-launcher__menu-item-external-icon--Color);
   opacity: 0;
@@ -211,14 +220,14 @@
 }
 
 .pf-v5-c-app-launcher__group + .pf-v5-c-app-launcher__group {
-  padding-top: var(--pf-v5-c-app-launcher__group--group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-app-launcher__group--group--PaddingTop);
 }
 
 .pf-v5-c-app-launcher__group-title {
-  padding-top: var(--pf-v5-c-app-launcher__group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-app-launcher__group-title--PaddingRight);
-  padding-bottom: var(--pf-v5-c-app-launcher__group-title--PaddingBottom);
-  padding-left: var(--pf-v5-c-app-launcher__group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__group-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__group-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__group-title--PaddingRight);
   font-size: var(--pf-v5-c-app-launcher__group-title--FontSize);
   font-weight: var(--pf-v5-c-app-launcher__group-title--FontWeight);
   color: var(--pf-v5-c-app-launcher__group-title--Color);

package/components/AppLauncher/app-launcher.scss

@@ -93,8 +93,8 @@
   }
 
   .#{$divider} {
-    margin-top: var(--#{$app-launcher}--c-divider--MarginTop);
-    margin-bottom: var(--#{$app-launcher}--c-divider--MarginBottom);
+    margin-block-start: var(--#{$app-launcher}--c-divider--MarginTop);
+    margin-block-end: var(--#{$app-launcher}--c-divider--MarginBottom);
 
     // Support divider as last item in group to separate groups
     &:last-child {
@@ -104,7 +104,10 @@
 }
 
 .#{$app-launcher}__toggle {
-  padding: var(--#{$app-launcher}__toggle--PaddingTop) var(--#{$app-launcher}__toggle--PaddingRight) var(--#{$app-launcher}__toggle--PaddingBottom) var(--#{$app-launcher}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$app-launcher}__toggle--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__toggle--PaddingRight);
   color: var(--#{$app-launcher}__toggle--Color);
   background-color: var(--#{$app-launcher}__toggle--BackgroundColor);
   border: none;
@@ -131,17 +134,17 @@
 
 .#{$app-launcher}__menu {
   position: absolute;
-  top: var(--#{$app-launcher}__menu--Top);
+  inset-block-start: var(--#{$app-launcher}__menu--Top);
   z-index: var(--#{$app-launcher}__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--#{$app-launcher}__menu--PaddingTop);
-  padding-bottom: var(--#{$app-launcher}__menu--PaddingBottom);
+  padding-block-start: var(--#{$app-launcher}__menu--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__menu--PaddingBottom);
   background-color: var(--#{$app-launcher}__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--#{$app-launcher}__menu--BoxShadow);
 
   &.pf-m-align-right {
-    right: 0;
+   inset-inline-end: 0;
   }
 
   .#{$app-launcher}.pf-m-top & {
@@ -154,19 +157,22 @@
     --#{$app-launcher}--m-top__menu--TranslateY: 0;
 
     position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset-block-start: auto;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: auto;
     z-index: auto;
     min-width: min-content;
   }
 }
 
 .#{$app-launcher}__menu-search {
-  padding: var(--#{$app-launcher}__menu-search--PaddingTop) var(--#{$app-launcher}__menu-search--PaddingRight) var(--#{$app-launcher}__menu-search--PaddingBottom) var(--#{$app-launcher}__menu-search--PaddingLeft);
-  margin-bottom: var(--#{$app-launcher}__menu-search--MarginBottom);
-  border-bottom: var(--#{$app-launcher}__menu-search--BottomBorderWidth) solid var(--#{$app-launcher}__menu-search--BottomBorderColor);
+  padding-block-start: var(--#{$app-launcher}__menu-search--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__menu-search--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__menu-search--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__menu-search--PaddingRight);
+  margin-block-end: var(--#{$app-launcher}__menu-search--MarginBottom);
+  border-block-end: var(--#{$app-launcher}__menu-search--BottomBorderWidth) solid var(--#{$app-launcher}__menu-search--BottomBorderColor);
 }
 
 .#{$app-launcher}__menu-wrapper {
@@ -182,7 +188,10 @@
   display: flex;
   align-items: center;
   width: var(--#{$app-launcher}__menu-item--Width);
-  padding: var(--#{$app-launcher}__menu-item--PaddingTop) var(--#{$app-launcher}__menu-item--PaddingRight) var(--#{$app-launcher}__menu-item--PaddingBottom) var(--#{$app-launcher}__menu-item--PaddingLeft);
+  padding-block-start: var(--#{$app-launcher}__menu-item--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__menu-item--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__menu-item--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__menu-item--PaddingRight);
   font-weight: var(--#{$app-launcher}__menu-item--FontWeight);
   color: var(--#{$app-launcher}__menu-item--Color);
   white-space: nowrap;
@@ -258,7 +267,7 @@
   justify-content: center;
   width: var(--#{$app-launcher}__menu-item-icon--Width);
   height: var(--#{$app-launcher}__menu-item-icon--Height);
-  margin-right: var(--#{$app-launcher}__menu-item-icon--MarginRight);
+  margin-inline-end: var(--#{$app-launcher}__menu-item-icon--MarginRight);
 
   > * {
     max-width: 100%;
@@ -267,8 +276,8 @@
 }
 
 .#{$app-launcher}__menu-item-external-icon {
-  padding-left: var(--#{$app-launcher}__menu-item-external-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--#{$app-launcher}__menu-item-external-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--#{$app-launcher}__menu-item-external-icon--FontSize);
   color: var(--#{$app-launcher}__menu-item-external-icon--Color);
   opacity: 0;
@@ -277,15 +286,15 @@
 
 .#{$app-launcher}__group {
   & + & {
-    padding-top: var(--#{$app-launcher}__group--group--PaddingTop);
+    padding-block-start: var(--#{$app-launcher}__group--group--PaddingTop);
   }
 }
 
 .#{$app-launcher}__group-title {
-  padding-top: var(--#{$app-launcher}__group-title--PaddingTop);
-  padding-right: var(--#{$app-launcher}__group-title--PaddingRight);
-  padding-bottom: var(--#{$app-launcher}__group-title--PaddingBottom);
-  padding-left: var(--#{$app-launcher}__group-title--PaddingLeft);
+  padding-block-start: var(--#{$app-launcher}__group-title--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__group-title--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__group-title--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__group-title--PaddingRight);
   font-size: var(--#{$app-launcher}__group-title--FontSize);
   font-weight: var(--#{$app-launcher}__group-title--FontWeight);
   color: var(--#{$app-launcher}__group-title--Color);

package/components/BackToTop/back-to-top.css

@@ -10,8 +10,8 @@
   --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg-bottom);
   position: absolute;
-  right: var(--pf-v5-c-back-to-top--Right);
-  bottom: var(--pf-v5-c-back-to-top--Bottom);
+  inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
+  inset-inline-end: var(--pf-v5-c-back-to-top--Right);
 }
 @media (min-width: 768px) {
   .pf-v5-c-back-to-top {

package/components/BackToTop/back-to-top.scss

@@ -17,8 +17,8 @@
   }
 
   position: absolute;
-  right: var(--#{$back-to-top}--Right);
-  bottom: var(--#{$back-to-top}--Bottom);
+  inset-block-end: var(--#{$back-to-top}--Bottom);
+  inset-inline-end: var(--#{$back-to-top}--Right);
 
   &.pf-m-hidden {
     display: none;

package/components/Backdrop/backdrop.css

@@ -3,8 +3,8 @@
   --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
   --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
   position: var(--pf-v5-c-backdrop--Position);
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v5-c-backdrop--ZIndex);
   width: 100%;
   height: 100%;

package/components/Backdrop/backdrop.scss

@@ -6,8 +6,8 @@
   --#{$backdrop}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
 
   position: var(--#{$backdrop}--Position);
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--#{$backdrop}--ZIndex);
   width: 100%;
   height: 100%;

package/components/BackgroundImage/background-image.css

@@ -7,8 +7,8 @@
   --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
   --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: -1;
   width: 100%;
   height: 100%;

package/components/BackgroundImage/background-image.scss

@@ -10,8 +10,8 @@
   --#{$background-image}--BackgroundSize: clamp(var(--#{$background-image}--BackgroundSize--min-width), var(--#{$background-image}--BackgroundSize--width), var(--#{$background-image}--BackgroundSize--max-width));
 
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: -1;
   width: 100%;
   height: 100%;

package/components/Badge/badge.css

@@ -12,8 +12,8 @@
   --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
   display: inline-block;
   min-width: var(--pf-v5-c-badge--MinWidth);
-  padding-right: var(--pf-v5-c-badge--PaddingRight);
-  padding-left: var(--pf-v5-c-badge--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
   font-size: var(--pf-v5-c-badge--FontSize);
   font-weight: var(--pf-v5-c-badge--FontWeight);
   color: var(--pf-v5-c-badge--Color);

package/components/Badge/badge.scss

@@ -18,8 +18,8 @@
 
   display: inline-block;
   min-width: var(--#{$badge}--MinWidth);
-  padding-right: var(--#{$badge}--PaddingRight);
-  padding-left: var(--#{$badge}--PaddingLeft);
+  padding-inline-start: var(--#{$badge}--PaddingLeft);
+  padding-inline-end: var(--#{$badge}--PaddingRight);
   font-size: var(--#{$badge}--FontSize);
   font-weight: var(--#{$badge}--FontWeight);
   color: var(--#{$badge}--Color);

package/components/Banner/banner.css

@@ -52,7 +52,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  padding: var(--pf-v5-c-banner--PaddingTop) var(--pf-v5-c-banner--PaddingRight) var(--pf-v5-c-banner--PaddingBottom) var(--pf-v5-c-banner--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-banner--PaddingTop);
+  padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-banner--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-banner--PaddingRight);
   font-size: var(--pf-v5-c-banner--FontSize);
   color: var(--pf-v5-c-banner--Color);
   white-space: nowrap;
@@ -78,7 +81,7 @@
 }
 .pf-v5-c-banner.pf-m-sticky {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: var(--pf-v5-c-banner--m-sticky--ZIndex);
   box-shadow: var(--pf-v5-c-banner--m-sticky--BoxShadow);
 }

package/components/Banner/banner.scss

@@ -36,7 +36,10 @@
   @include pf-v5-text-overflow;
 
   flex-shrink: 0;
-  padding: var(--#{$banner}--PaddingTop) var(--#{$banner}--PaddingRight) var(--#{$banner}--PaddingBottom) var(--#{$banner}--PaddingLeft);
+  padding-block-start: var(--#{$banner}--PaddingTop);
+  padding-block-end: var(--#{$banner}--PaddingBottom);
+  padding-inline-start: var(--#{$banner}--PaddingLeft);
+  padding-inline-end: var(--#{$banner}--PaddingRight);
   font-size: var(--#{$banner}--FontSize);
   color: var(--#{$banner}--Color);
   white-space: nowrap;
@@ -64,7 +67,7 @@
 
   &.pf-m-sticky {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--#{$banner}--m-sticky--ZIndex);
     box-shadow: var(--#{$banner}--m-sticky--BoxShadow);
   }

package/components/Breadcrumb/breadcrumb.css

@@ -36,11 +36,11 @@
   list-style: none;
 }
 .pf-v5-c-breadcrumb__item:not(:last-child) {
-  margin-right: var(--pf-v5-c-breadcrumb__item--MarginRight);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
 }
 
 .pf-v5-c-breadcrumb__item-divider {
-  margin-right: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
   font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
@@ -71,7 +71,10 @@ button.pf-v5-c-breadcrumb__link {
 }
 
 .pf-v5-c-breadcrumb__dropdown {
-  margin: var(--pf-v5-c-breadcrumb__dropdown--MarginTop) var(--pf-v5-c-breadcrumb__dropdown--MarginRight) var(--pf-v5-c-breadcrumb__dropdown--MarginBottom) var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
+  margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
+  margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
 }
 .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
   line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);

package/components/Breadcrumb/breadcrumb.scss

@@ -52,13 +52,13 @@
   list-style: none;
 
   &:not(:last-child) {
-    margin-right: var(--#{$breadcrumb}__item--MarginRight);
+    margin-inline-end: var(--#{$breadcrumb}__item--MarginRight);
   }
 }
 
 // Breadcrumb divider
 .#{$breadcrumb}__item-divider {
-  margin-right: var(--#{$breadcrumb}__item-divider--MarginRight);
+  margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);
   line-height: 1;
   color: var(--#{$breadcrumb}__item-divider--Color);
@@ -98,7 +98,10 @@
 }
 
 .#{$breadcrumb}__dropdown {
-  margin: var(--#{$breadcrumb}__dropdown--MarginTop) var(--#{$breadcrumb}__dropdown--MarginRight) var(--#{$breadcrumb}__dropdown--MarginBottom) var(--#{$breadcrumb}__dropdown--MarginLeft);
+  margin-block-start: var(--#{$breadcrumb}__dropdown--MarginTop);
+  margin-block-end: var(--#{$breadcrumb}__dropdown--MarginBottom);
+  margin-inline-start: var(--#{$breadcrumb}__dropdown--MarginLeft);
+  margin-inline-end: var(--#{$breadcrumb}__dropdown--MarginRight);
 
   .#{$dropdown}__toggle {
     line-height: var(--#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight);

package/components/Button/button.css

@@ -170,7 +170,10 @@
   --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
   position: relative;
   display: inline-block;
-  padding: var(--pf-v5-c-button--PaddingTop) var(--pf-v5-c-button--PaddingRight) var(--pf-v5-c-button--PaddingBottom) var(--pf-v5-c-button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-button--PaddingRight);
   font-size: var(--pf-v5-c-button--FontSize);
   font-weight: var(--pf-v5-c-button--FontWeight);
   line-height: var(--pf-v5-c-button--LineHeight);
@@ -182,10 +185,10 @@
 }
 .pf-v5-c-button::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
   border: var(--pf-v5-c-button--after--BorderWidth) solid;
@@ -297,8 +300,11 @@
   --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
   --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
   display: inline;
-  padding: var(--pf-v5-c-button--m-link--m-inline--PaddingTop) var(--pf-v5-c-button--m-link--m-inline--PaddingRight) var(--pf-v5-c-button--m-link--m-inline--PaddingBottom) var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
-  text-align: left;
+  padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
+  padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
+  text-align: start;
   white-space: normal;
   cursor: pointer;
 }
@@ -394,7 +400,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control:hover::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-control:active, .pf-v5-c-button.pf-m-control.pf-m-active {
   --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--active--Color);
@@ -402,7 +408,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--active--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control:active::after, .pf-v5-c-button.pf-m-control.pf-m-active::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-control:focus {
   --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--focus--Color);
@@ -410,7 +416,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--focus--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control:focus::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-control.pf-m-expanded {
   --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--m-expanded--Color);
@@ -418,7 +424,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control.pf-m-expanded::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-plain {
   --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
@@ -480,16 +486,16 @@
 }
 
 .pf-v5-c-button__icon.pf-m-start {
-  margin-right: var(--pf-v5-c-button__icon--m-start--MarginRight);
+  margin-inline-end: var(--pf-v5-c-button__icon--m-start--MarginRight);
 }
 .pf-v5-c-button__icon.pf-m-end {
-  margin-left: var(--pf-v5-c-button__icon--m-end--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-button__icon--m-end--MarginLeft);
 }
 
 .pf-v5-c-button__progress {
   position: absolute;
-  top: var(--pf-v5-c-button__progress--Top);
-  left: var(--pf-v5-c-button__progress--Left);
+  inset-block-start: var(--pf-v5-c-button__progress--Top);
+  inset-inline-start: var(--pf-v5-c-button__progress--Left);
   line-height: 1;
   transform: translate(var(--pf-v5-c-button__progress--TranslateX), var(--pf-v5-c-button__progress--TranslateY));
 }
@@ -500,7 +506,7 @@
 .pf-v5-c-button__count {
   display: inline-flex;
   align-items: center;
-  margin-left: var(--pf-v5-c-button__count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-button__count--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-button {
@@ -545,5 +551,5 @@
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
   border: 0;
-  border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
+  border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
 }