@patternfly/patternfly 5.1.0-prerelease.6 → 5.1.0-prerelease.8

package/components/AboutModalBox/about-modal-box.css

@@ -132,7 +132,10 @@
 .pf-v5-c-about-modal-box__brand {
   display: flex;
   grid-area: brand;
-  padding: var(--pf-v5-c-about-modal-box__brand--PaddingTop) var(--pf-v5-c-about-modal-box__brand--PaddingRight) var(--pf-v5-c-about-modal-box__brand--PaddingBottom) var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight);
 }
 
 .pf-v5-c-about-modal-box__brand-image {
@@ -143,14 +146,14 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-right: var(--pf-v5-c-about-modal-box__header--PaddingRight);
-  padding-bottom: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
-  padding-left: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
+  padding-block-end: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__header--PaddingRight);
 }
 
 .pf-v5-c-about-modal-box__strapline {
-  padding-top: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
-  margin-top: auto;
+  padding-block-start: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
+  margin-block-start: auto;
   font-size: var(--pf-v5-c-about-modal-box__strapline--FontSize);
 }
 
@@ -158,12 +161,15 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin: var(--pf-v5-c-about-modal-box__content--MarginTop) var(--pf-v5-c-about-modal-box__content--MarginRight) var(--pf-v5-c-about-modal-box__content--MarginBottom) var(--pf-v5-c-about-modal-box__content--MarginLeft);
+  margin-block-start: var(--pf-v5-c-about-modal-box__content--MarginTop);
+  margin-block-end: var(--pf-v5-c-about-modal-box__content--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-about-modal-box__content--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-about-modal-box__content--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
   word-break: break-word;
+  -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box__content {
@@ -174,14 +180,14 @@
 
 .pf-v5-c-about-modal-box__close {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   display: flex;
   grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-top: var(--pf-v5-c-about-modal-box__close--PaddingTop);
-  padding-right: var(--pf-v5-c-about-modal-box__close--PaddingRight);
-  padding-bottom: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-about-modal-box__close--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__close--PaddingRight);
 }
 @media only screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box__close {

package/components/AboutModalBox/about-modal-box.scss

@@ -137,7 +137,10 @@
 .#{$about-modal-box}__brand {
   display: flex;
   grid-area: brand;
-  padding: var(--#{$about-modal-box}__brand--PaddingTop) var(--#{$about-modal-box}__brand--PaddingRight) var(--#{$about-modal-box}__brand--PaddingBottom) var(--#{$about-modal-box}__brand--PaddingLeft);
+  padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
+  padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
+  padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
+  padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
 }
 
 .#{$about-modal-box}__brand-image {
@@ -149,15 +152,15 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-right: var(--#{$about-modal-box}__header--PaddingRight);
-  padding-bottom: var(--#{$about-modal-box}__header--PaddingBottom);
-  padding-left: var(--#{$about-modal-box}__header--PaddingLeft);
+  padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
+  padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
+  padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
 }
 
 // Strapline
 .#{$about-modal-box}__strapline {
-  padding-top: var(--#{$about-modal-box}__strapline--PaddingTop);
-  margin-top: auto;
+  padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
+  margin-block-start: auto;
   font-size: var(--#{$about-modal-box}__strapline--FontSize);
 }
 
@@ -166,12 +169,15 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin: var(--#{$about-modal-box}__content--MarginTop) var(--#{$about-modal-box}__content--MarginRight) var(--#{$about-modal-box}__content--MarginBottom) var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
+  margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
+  margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-inline-end: var(--#{$about-modal-box}__content--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
   word-break: break-word;
+  -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
     overflow: visible;
@@ -182,14 +188,14 @@
 // Close
 .#{$about-modal-box}__close {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   display: flex;
   grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-top: var(--#{$about-modal-box}__close--PaddingTop);
-  padding-right: var(--#{$about-modal-box}__close--PaddingRight);
-  padding-bottom: var(--#{$about-modal-box}__close--PaddingBottom);
+  padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
+  padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
+  padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
 
   @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
     grid-area: 1 / 2;

package/components/Accordion/accordion.css

@@ -105,30 +105,34 @@
 }
 .pf-v5-c-accordion.pf-m-bordered {
   --pf-v5-c-accordion__toggle--after--Top: var(--pf-v5-c-accordion--m-bordered__toggle--after--Top);
-  border-top: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
+  border-block-start: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle::before {
   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;
   content: "";
-  border: solid var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
-  border-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border-color: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
+  border-style: solid;
+  border-block-start-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border-inline-start-width: 0;
+  border-inline-end-width: 0;
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded {
   --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__expandable-content.pf-m-expanded .pf-v5-c-accordion__expandable-content-body:last-child::before {
   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-bottom: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
 }
 
 .pf-v5-c-accordion__toggle {
@@ -137,7 +141,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--pf-v5-c-accordion__toggle--PaddingTop) var(--pf-v5-c-accordion__toggle--PaddingRight) var(--pf-v5-c-accordion__toggle--PaddingBottom) var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-accordion__toggle--PaddingRight);
   font-family: var(--pf-v5-c-accordion__toggle--FontFamily, inherit);
   font-size: var(--pf-v5-c-accordion__toggle--FontSize, inherit);
   background-color: var(--pf-v5-c-accordion__toggle--BackgroundColor);
@@ -145,9 +152,9 @@
 }
 .pf-v5-c-accordion__toggle::after {
   position: absolute;
-  top: var(--pf-v5-c-accordion__toggle--after--Top);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-accordion__toggle--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-accordion__toggle--after--Width);
   content: "";
   background-color: var(--pf-v5-c-accordion__toggle--after--BackgroundColor);
@@ -208,13 +215,16 @@
 
 .pf-v5-c-accordion__expandable-content-body {
   position: relative;
-  padding: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop) var(--pf-v5-c-accordion__expandable-content-body--PaddingRight) var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom) var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingRight);
 }
 .pf-v5-c-accordion__expandable-content-body::after {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-accordion__expandable-content-body--after--Width);
   content: "";
   background-color: var(--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor);

package/components/Accordion/accordion.scss

@@ -114,18 +114,22 @@
   &.pf-m-bordered {
     --#{$accordion}__toggle--after--Top: var(--#{$accordion}--m-bordered__toggle--after--Top);
 
-    border-top: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
+    border-block-start: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
 
     .#{$accordion}__toggle {
       &::before {
         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;
         content: "";
-        border: solid var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
-        border-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth) 0 var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
+        border-color: var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
+        border-style: solid;
+        border-block-start-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth);
+        border-block-end-width: var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
       }
 
       &.pf-m-expanded {
@@ -139,13 +143,13 @@
         .#{$accordion}__expandable-content-body:last-child {
           &::before {
             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-bottom: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+            border-block-end: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
           }
         }
       }
@@ -160,7 +164,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--#{$accordion}__toggle--PaddingTop) var(--#{$accordion}__toggle--PaddingRight) var(--#{$accordion}__toggle--PaddingBottom) var(--#{$accordion}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
+  padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$accordion}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$accordion}__toggle--PaddingRight);
   font-family: var(--#{$accordion}__toggle--FontFamily, inherit);
   font-size: var(--#{$accordion}__toggle--FontSize, inherit);
   background-color: var(--#{$accordion}__toggle--BackgroundColor);
@@ -168,9 +175,9 @@
 
   &::after {
     position: absolute;
-    top: var(--#{$accordion}__toggle--after--Top);
-    bottom: 0;
-    left: 0;
+    inset-block-start: var(--#{$accordion}__toggle--after--Top);
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$accordion}__toggle--after--Width);
     content: "";
     background-color: var(--#{$accordion}__toggle--after--BackgroundColor);
@@ -242,13 +249,16 @@
 
 .#{$accordion}__expandable-content-body {
   position: relative;
-  padding: var(--#{$accordion}__expandable-content-body--PaddingTop) var(--#{$accordion}__expandable-content-body--PaddingRight) var(--#{$accordion}__expandable-content-body--PaddingBottom) var(--#{$accordion}__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingTop);
+  padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingRight);
 
   &::after {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$accordion}__expandable-content-body--after--Width);
     content: "";
     background-color: var(--#{$accordion}__expandable-content-body--after--BackgroundColor);

package/components/ActionList/action-list.css

@@ -13,13 +13,13 @@
 }
 .pf-v5-c-action-list > * + *,
 .pf-v5-c-action-list__group > * + * {
-  margin-left: var(--pf-v5-c-action-list--child--spacer);
+  margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
 }
 .pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
 .pf-v5-c-action-list .pf-v5-c-action-list__group + *,
 .pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
 .pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
-  margin-left: var(--pf-v5-c-action-list--group--spacer);
+  margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
 }
 .pf-v5-c-action-list.pf-m-icons,
 .pf-v5-c-action-list__group.pf-m-icons {

package/components/ActionList/action-list.scss

@@ -15,12 +15,12 @@
   align-items: center;
 
   > * + * {
-    margin-left: var(--#{$action-list}--child--spacer);
+    margin-inline-start: var(--#{$action-list}--child--spacer);
   }
 
   > * + .#{$action-list}__group,
   .#{$action-list}__group + * {
-    margin-left: var(--#{$action-list}--group--spacer);
+    margin-inline-start: var(--#{$action-list}--group--spacer);
   }
 
   &.pf-m-icons {

package/components/Alert/alert-group.css

@@ -20,12 +20,12 @@
   --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
 }
 .pf-v5-c-alert-group > * + * {
-  margin-top: var(--pf-v5-c-alert-group__item--MarginTop);
+  margin-block-start: var(--pf-v5-c-alert-group__item--MarginTop);
 }
 .pf-v5-c-alert-group.pf-m-toast {
   position: fixed;
-  top: var(--pf-v5-c-alert-group--m-toast--Top);
-  right: var(--pf-v5-c-alert-group--m-toast--Right);
+  inset-block-start: var(--pf-v5-c-alert-group--m-toast--Top);
+  inset-inline-end: var(--pf-v5-c-alert-group--m-toast--Right);
   z-index: var(--pf-v5-c-alert-group--m-toast--ZIndex);
   width: calc(100% - var(--pf-v5-c-alert-group--m-toast--Right) * 2);
   max-width: var(--pf-v5-c-alert-group--m-toast--MaxWidth);
@@ -34,7 +34,10 @@
 .pf-v5-c-alert-group__overflow-button {
   position: relative;
   width: 100%;
-  padding: var(--pf-v5-c-alert-group__overflow-button--PaddingTop) var(--pf-v5-c-alert-group__overflow-button--PaddingRight) var(--pf-v5-c-alert-group__overflow-button--PaddingBottom) var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-alert-group__overflow-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-alert-group__overflow-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-alert-group__overflow-button--PaddingRight);
   color: var(--pf-v5-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v5-c-alert-group__overflow-button--BackgroundColor);
   border-width: var(--pf-v5-c-alert-group__overflow-button--BorderWidth);

package/components/Alert/alert-group.scss

@@ -29,14 +29,14 @@
 
   // Spacing between alerts
   > * + * {
-    margin-top: var(--#{$alert-group}__item--MarginTop);
+    margin-block-start: var(--#{$alert-group}__item--MarginTop);
   }
 
   // Toast positioning modifier
   &.pf-m-toast {
     position: fixed;
-    top: var(--#{$alert-group}--m-toast--Top);
-    right: var(--#{$alert-group}--m-toast--Right);
+    inset-block-start: var(--#{$alert-group}--m-toast--Top);
+    inset-inline-end: var(--#{$alert-group}--m-toast--Right);
     z-index: var(--#{$alert-group}--m-toast--ZIndex);
     width: calc(100% - calc(var(--#{$alert-group}--m-toast--Right) * 2));
     max-width: var(--#{$alert-group}--m-toast--MaxWidth);
@@ -46,7 +46,10 @@
 .#{$alert-group}__overflow-button {
   position: relative;
   width: 100%;
-  padding: var(--#{$alert-group}__overflow-button--PaddingTop) var(--#{$alert-group}__overflow-button--PaddingRight) var(--#{$alert-group}__overflow-button--PaddingBottom) var(--#{$alert-group}__overflow-button--PaddingLeft);
+  padding-block-start: var(--#{$alert-group}__overflow-button--PaddingTop);
+  padding-block-end: var(--#{$alert-group}__overflow-button--PaddingBottom);
+  padding-inline-start: var(--#{$alert-group}__overflow-button--PaddingLeft);
+  padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingRight);
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
   border-width: var(--#{$alert-group}__overflow-button--BorderWidth);

package/components/Alert/alert.css

@@ -87,10 +87,13 @@
   display: grid;
   grid-template-areas: var(--pf-v5-c-alert--GridTemplateAreas);
   grid-template-columns: var(--pf-v5-c-alert--GridTemplateColumns);
-  padding: var(--pf-v5-c-alert--PaddingTop) var(--pf-v5-c-alert--PaddingRight) var(--pf-v5-c-alert--PaddingBottom) var(--pf-v5-c-alert--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-alert--PaddingTop);
+  padding-block-end: var(--pf-v5-c-alert--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-alert--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-alert--PaddingRight);
   font-size: var(--pf-v5-c-alert__FontSize);
   background-color: var(--pf-v5-c-alert--BackgroundColor);
-  border-top: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
+  border-block-start: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
   box-shadow: var(--pf-v5-c-alert--BoxShadow);
 }
 .pf-v5-c-alert.pf-m-custom {
@@ -146,9 +149,9 @@
 }
 
 .pf-v5-c-alert__toggle {
-  margin-top: var(--pf-v5-c-alert__toggle--MarginTop);
-  margin-bottom: var(--pf-v5-c-alert__toggle--MarginBottom);
-  margin-left: var(--pf-v5-c-alert__toggle--MarginLeft);
+  margin-block-start: var(--pf-v5-c-alert__toggle--MarginTop);
+  margin-block-end: var(--pf-v5-c-alert__toggle--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-alert__toggle--MarginLeft);
 }
 
 .pf-v5-c-alert__toggle-icon {
@@ -160,8 +163,8 @@
 .pf-v5-c-alert__icon {
   display: flex;
   grid-area: icon;
-  margin-top: var(--pf-v5-c-alert__icon--MarginTop);
-  margin-right: var(--pf-v5-c-alert__icon--MarginRight);
+  margin-block-start: var(--pf-v5-c-alert__icon--MarginTop);
+  margin-inline-end: var(--pf-v5-c-alert__icon--MarginRight);
   font-size: var(--pf-v5-c-alert__icon--FontSize);
   color: var(--pf-v5-c-alert__icon--Color);
 }
@@ -181,7 +184,7 @@
 
 .pf-v5-c-alert__description {
   grid-area: description;
-  padding-top: var(--pf-v5-c-alert__description--PaddingTop);
+  padding-block-start: var(--pf-v5-c-alert__description--PaddingTop);
   word-break: break-word;
 }
 .pf-v5-c-alert__description + .pf-v5-c-alert__action-group {
@@ -190,9 +193,9 @@
 
 .pf-v5-c-alert__action {
   grid-area: action;
-  margin-top: var(--pf-v5-c-alert__action--MarginTop);
-  margin-right: var(--pf-v5-c-alert__action--MarginRight);
-  margin-bottom: var(--pf-v5-c-alert__action--MarginBottom);
+  margin-block-start: var(--pf-v5-c-alert__action--MarginTop);
+  margin-block-end: var(--pf-v5-c-alert__action--MarginBottom);
+  margin-inline-end: var(--pf-v5-c-alert__action--MarginRight);
   transform: translateY(var(--pf-v5-c-alert__action--TranslateY));
 }
 .pf-v5-c-alert__action > .pf-v5-c-button {
@@ -201,13 +204,13 @@
 
 .pf-v5-c-alert__action-group {
   grid-area: actiongroup;
-  padding-top: var(--pf-v5-c-alert__action-group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-alert__action-group--PaddingTop);
 }
 .pf-v5-c-alert__action-group > .pf-v5-c-button {
   --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
 }
 .pf-v5-c-alert__action-group > .pf-v5-c-button:not(:last-child) {
-  margin-right: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-alert {

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