@patternfly/patternfly 5.0.2 → 5.1.0-prerelease.10

package/components/Nav/nav.scss

@@ -419,7 +419,7 @@
     --#{$menu}__item-description--Color: var(--#{$nav}--c-menu__item-description--Color);
 
     &:first-child > .#{$menu}__content {
-      border-bottom: var(--#{$nav}--c-menu__item--before--BorderBottomWidth) solid var(--#{$nav}--c-menu__item--before--BorderBottomColor);
+      border-block-end: var(--#{$nav}--c-menu__item--before--BorderBottomWidth) solid var(--#{$nav}--c-menu__item--before--BorderBottomColor);
     }
 
     &.pf-m-flyout,
@@ -434,10 +434,10 @@
       --#{$menu}__item--PaddingBottom: var(--#{$nav}--c-menu--m-flyout__item--PaddingBottom);
       --#{$menu}__item--PaddingLeft: var(--#{$nav}--c-menu--m-flyout__item--PaddingLeft);
 
-      top: var(--#{$nav}--c-menu--m-flyout--c-menu--Top);
-      right: var(--#{$nav}--c-menu--m-flyout--c-menu--Right);
-      bottom: var(--#{$nav}--c-menu--m-flyout--c-menu--Bottom);
-      left: var(--#{$nav}--c-menu--m-flyout--c-menu--Left);
+      inset-block-start: var(--#{$nav}--c-menu--m-flyout--c-menu--Top);
+      inset-block-end: var(--#{$nav}--c-menu--m-flyout--c-menu--Bottom);
+      inset-inline-start: var(--#{$nav}--c-menu--m-flyout--c-menu--Left);
+      inset-inline-end: var(--#{$nav}--c-menu--m-flyout--c-menu--Right);
     }
 
     &.pf-m-flyout {
@@ -462,8 +462,8 @@
     }
 
     .#{$divider} {
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
     }
   }
 
@@ -474,21 +474,21 @@
     &::before,
     &::after {
       position: absolute;
-      top: 0;
+      inset-block-start: 0;
       content: "";
     }
 
     &::before {
-      right: 0;
-      bottom: calc(var(--#{$nav}--c-menu__item--before--BorderBottomWidth) * -1);
-      left: 0;
-      border-bottom: var(--#{$nav}--c-menu__item--before--BorderBottomWidth) solid var(--#{$nav}--c-menu__item--before--BorderBottomColor);
+      inset-block-end: calc(var(--#{$nav}--c-menu__item--before--BorderBottomWidth) * -1);
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      border-block-end: var(--#{$nav}--c-menu__item--before--BorderBottomWidth) solid var(--#{$nav}--c-menu__item--before--BorderBottomColor);
     }
 
     &::after {
-      bottom: 0;
-      left: 0;
-      border-left: var(--#{$nav}--c-menu__item--after--BorderLeftWidth) solid var(--#{$nav}--c-menu__item--after--BorderLeftColor);
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      border-inline-start: var(--#{$nav}--c-menu__item--after--BorderLeftWidth) solid var(--#{$nav}--c-menu__item--after--BorderLeftColor);
     }
 
     &.pf-m-current {
@@ -508,7 +508,7 @@
   }
 
   .#{$menu}__item-toggle-icon {
-    margin-left: calc(var(--#{$menu}__item-toggle-icon--PaddingLeft) * -1);
+    margin-inline-start: calc(var(--#{$menu}__item-toggle-icon--PaddingLeft) * -1);
   }
 
   &.pf-m-horizontal,
@@ -554,20 +554,20 @@
       white-space: nowrap;
 
       &::before {
-        top: auto;
-        bottom: 0;
+        inset-block-start: auto;
+        inset-block-end: 0;
       }
     }
   }
 
   &.pf-m-horizontal .#{$nav}__link::before {
-    right: var(--#{$nav}--m-horizontal__link--Right);
-    left: var(--#{$nav}--m-horizontal__link--Left);
+    inset-inline-start: var(--#{$nav}--m-horizontal__link--Left);
+    inset-inline-end: var(--#{$nav}--m-horizontal__link--Right);
   }
 
   &.pf-m-tertiary .#{$nav}__link::before {
-    right: var(--#{$nav}--m-tertiary__link--Right);
-    left: var(--#{$nav}--m-tertiary__link--Left);
+    inset-inline-start: var(--#{$nav}--m-tertiary__link--Left);
+    inset-inline-end: var(--#{$nav}--m-tertiary__link--Right);
   }
 
   &.pf-m-light {
@@ -708,10 +708,10 @@
   .#{$divider} {
     --#{$divider}--after--BackgroundColor: var(--#{$nav}--c-divider--BackgroundColor);
 
-    padding-right: var(--#{$nav}--c-divider--PaddingRight);
-    padding-left: var(--#{$nav}--c-divider--PaddingLeft);
-    margin-top: var(--#{$nav}--c-divider--MarginTop);
-    margin-bottom: var(--#{$nav}--c-divider--MarginBottom);
+    padding-inline-start: var(--#{$nav}--c-divider--PaddingLeft);
+    padding-inline-end: var(--#{$nav}--c-divider--PaddingRight);
+    margin-block-start: var(--#{$nav}--c-divider--MarginTop);
+    margin-block-end: var(--#{$nav}--c-divider--MarginBottom);
   }
 
   &.pf-m-scrollable {
@@ -721,12 +721,12 @@
 
     // Scroll buttons
     .#{$nav}__scroll-button:nth-of-type(1) {
-      margin-right: 0;
+      margin-inline-end: 0;
       transform: translateX(0);
     }
 
     .#{$nav}__scroll-button:nth-of-type(2) {
-      margin-left: 0;
+      margin-inline-start: 0;
       transform: translateX(0);
     }
   }
@@ -740,8 +740,8 @@
 .#{$nav}__list {
   position: relative;
   display: block;
-  padding-top: var(--#{$nav}__list--PaddingTop);
-  padding-bottom: var(--#{$nav}__list--PaddingBottom);
+  padding-block-start: var(--#{$nav}__list--PaddingTop);
+  padding-block-end: var(--#{$nav}__list--PaddingBottom);
 }
 
 // Borders
@@ -753,16 +753,16 @@
 
     &::before {
       position: absolute;
-      right: 0;
-      bottom: calc(var(--#{$nav}__item--before--BorderWidth) * -1);
-      left: 0;
+      inset-block-end: calc(var(--#{$nav}__item--before--BorderWidth) * -1);
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       content: "";
-      border-bottom: var(--#{$nav}__item--before--BorderWidth) solid var(--#{$nav}__item--before--BorderColor);
+      border-block-end: var(--#{$nav}__item--before--BorderWidth) solid var(--#{$nav}__item--before--BorderColor);
     }
   }
 
   &:not(:first-child) {
-    margin-top: var(--#{$nav}__item--MarginTop);
+    margin-block-start: var(--#{$nav}__item--MarginTop);
   }
   
   .#{$nav}__item {
@@ -777,20 +777,20 @@
       // stylelint-disable max-nesting-depth
       &::before {
         @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-          border-bottom: none;
+          border-block-end: none;
         }
       }
       // stylelint-enable
 
       .#{$nav}__list::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-left: var(--#{$nav}__item--before--BorderWidth) solid var(--#{$nav}__item--before--BorderColor);
+        border-inline-start: var(--#{$nav}__item--before--BorderWidth) solid var(--#{$nav}__item--before--BorderColor);
       }
     }
   }
@@ -835,11 +835,11 @@
       --#{$nav}--c-menu--m-flyout--c-menu--Right: var(--#{$nav}__item--m-flyout--c-menu--m-left--Right);
 
       position: absolute;
-      top: var(--#{$nav}__item--m-flyout--c-menu--Top);
-      left: var(--#{$nav}__item--m-flyout--c-menu--Left);
+      inset-block-start: var(--#{$nav}__item--m-flyout--c-menu--Top);
+      inset-inline-start: var(--#{$nav}__item--m-flyout--c-menu--Left);
 
       .#{$menu} {
-        top: var(--#{$nav}__item--m-flyout--c-menu--c-menu--Top);
+        inset-block-start: var(--#{$nav}__item--m-flyout--c-menu--c-menu--Top);
       }
 
       .#{$menu}__list-item:first-child {
@@ -854,21 +854,21 @@
 
         &::before {
           position: absolute;
-          right: 0;
-          bottom: 0;
-          left: 0;
+          inset-block-end: 0;
+          inset-inline-start: 0;
+          inset-inline-end: 0;
           content: "";
-          border-bottom: var(--#{$nav}__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--#{$nav}__item--m-flyout--c-menu__item--before--BorderBottomColor);
+          border-block-end: var(--#{$nav}__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--#{$nav}__item--m-flyout--c-menu__item--before--BorderBottomColor);
         }
 
         &:hover {
           &::after {
             position: absolute;
-            top: var(--#{$nav}__item--m-flyout--c-menu__item--hover--after--Top);
-            bottom: 0;
-            left: 0;
+            inset-block-start: var(--#{$nav}__item--m-flyout--c-menu__item--hover--after--Top);
+            inset-block-end: 0;
+            inset-inline-start: 0;
             content: "";
-            border-left: var(--#{$nav}__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--#{$nav}__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
+            border-inline-start: var(--#{$nav}__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--#{$nav}__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
           }
         }
       }
@@ -879,7 +879,7 @@
   &.pf-m-drilldown {
     &.pf-m-expanded {
       > .#{$nav}__subnav {
-        left: 0;
+        inset-inline-start: 0;
         z-index: var(--#{$nav}__item--m-drilldown--m-expanded__subnav--ZIndex);
       }
     }
@@ -891,7 +891,10 @@
   position: relative;
   display: flex;
   align-items: baseline;
-  padding: var(--#{$nav}__link--PaddingTop) var(--#{$nav}__link--PaddingRight) var(--#{$nav}__link--PaddingBottom) var(--#{$nav}__link--PaddingLeft);
+  padding-block-start: var(--#{$nav}__link--PaddingTop);
+  padding-block-end: var(--#{$nav}__link--PaddingBottom);
+  padding-inline-start: var(--#{$nav}__link--PaddingLeft);
+  padding-inline-end: var(--#{$nav}__link--PaddingRight);
   font-size: var(--#{$nav}__link--FontSize);
   font-weight: var(--#{$nav}__link--FontWeight);
   color: var(--#{$nav}__link--Color);
@@ -906,20 +909,20 @@
   }
 
   &::before {
-    right: 0;
-    bottom: calc(var(--#{$nav}__link--before--BorderBottomWidth) * -1);
-    left: 0;
+    inset-block-end: calc(var(--#{$nav}__link--before--BorderBottomWidth) * -1);
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     border-color: var(--#{$nav}__link--before--BorderColor);
-    border-bottom-width: var(--#{$nav}__link--before--BorderBottomWidth);
+    border-block-end-width: var(--#{$nav}__link--before--BorderBottomWidth);
   }
 
   &::after {
-    top: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     border: 0 solid;
     border-color: var(--#{$nav}__link--after--BorderColor);
-    border-left-width: var(--#{$nav}__link--after--BorderLeftWidth);
+    border-inline-start-width: var(--#{$nav}__link--after--BorderLeftWidth);
   }
 
   // States
@@ -930,12 +933,12 @@
     background-color: var(--#{$nav}__link--hover--BackgroundColor);
 
     &::before {
-      border-bottom-width: var(--#{$nav}__link--hover--before--BorderBottomWidth);
+      border-block-end-width: var(--#{$nav}__link--hover--before--BorderBottomWidth);
     }
 
     &::after {
       border-color: var(--#{$nav}__link--hover--after--BorderColor);
-      border-left-width: var(--#{$nav}__link--hover--after--BorderLeftWidth);
+      border-inline-start-width: var(--#{$nav}__link--hover--after--BorderLeftWidth);
     }
   }
 
@@ -944,12 +947,12 @@
     background-color: var(--#{$nav}__link--focus--BackgroundColor);
 
     &::before {
-      border-bottom-width: var(--#{$nav}__link--focus--before--BorderBottomWidth);
+      border-block-end-width: var(--#{$nav}__link--focus--before--BorderBottomWidth);
     }
 
     &::after {
       border-color: var(--#{$nav}__link--focus--after--BorderColor);
-      border-left-width: var(--#{$nav}__link--focus--after--BorderLeftWidth);
+      border-inline-start-width: var(--#{$nav}__link--focus--after--BorderLeftWidth);
     }
   }
 
@@ -958,12 +961,12 @@
     background-color: var(--#{$nav}__link--active--BackgroundColor);
 
     &::before {
-      border-bottom-width: var(--#{$nav}__link--active--before--BorderBottomWidth);
+      border-block-end-width: var(--#{$nav}__link--active--before--BorderBottomWidth);
     }
 
     &::after {
       border-color: var(--#{$nav}__link--active--after--BorderColor);
-      border-left-width: var(--#{$nav}__link--active--after--BorderLeftWidth);
+      border-inline-start-width: var(--#{$nav}__link--active--after--BorderLeftWidth);
     }
   }
 
@@ -974,12 +977,12 @@
     background-color: var(--#{$nav}__link--m-current--BackgroundColor);
 
     &::before {
-      border-bottom-width: var(--#{$nav}__link--m-current--before--BorderBottomWidth);
+      border-block-end-width: var(--#{$nav}__link--m-current--before--BorderBottomWidth);
     }
 
     &::after {
       border-color: var(--#{$nav}__link--m-current--after--BorderColor);
-      border-left-width: var(--#{$nav}__link--m-current--after--BorderLeftWidth);
+      border-inline-start-width: var(--#{$nav}__link--m-current--after--BorderLeftWidth);
     }
   }
 
@@ -1016,8 +1019,8 @@
   --#{$nav}--c-divider--PaddingLeft: var(--#{$nav}__subnav--c-divider--PaddingLeft);
 
   max-height: var(--#{$nav}__subnav--MaxHeight);
-  padding-bottom: var(--#{$nav}__subnav--PaddingBottom);
-  padding-left: var(--#{$nav}__subnav--PaddingLeft);
+  padding-block-end: var(--#{$nav}__subnav--PaddingBottom);
+  padding-inline-start: var(--#{$nav}__subnav--PaddingLeft);
   transition: var(--#{$nav}--Transition);
 
   .#{$nav}__subnav {
@@ -1044,15 +1047,15 @@
 // Toggle caret
 .#{$nav}__toggle {
   flex: none;
-  padding-right: var(--#{$nav}__toggle--PaddingRight);
-  padding-left: var(--#{$nav}__toggle--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--#{$nav}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$nav}__toggle--PaddingRight);
+  margin-inline-start: auto;
   font-size: var(--#{$nav}__toggle--FontSize);
   line-height: 1;
 
   &.pf-m-start {
-    margin-right: var(--#{$nav}__toggle--m-start--MarginRight);
-    margin-left: calc(var(--#{$nav}__toggle--PaddingRight) * -1);
+    margin-inline-start: calc(var(--#{$nav}__toggle--PaddingRight) * -1);
+    margin-inline-end: var(--#{$nav}__toggle--m-start--MarginRight);
   }
 }
 
@@ -1094,25 +1097,28 @@
   --#{$nav}--c-divider--MarginBottom: 0;
 
   &:first-child {
-    padding-top: var(--#{$nav}__section--first-child--PaddingTop);
+    padding-block-start: var(--#{$nav}__section--first-child--PaddingTop);
   }
 
   & + & {
-    margin-top: var(--#{$nav}__section--section--MarginTop);
+    margin-block-start: var(--#{$nav}__section--section--MarginTop);
   }
 
   &:last-child {
-    padding-bottom: var(--#{$nav}__section--last-child--PaddingBottom);
+    padding-block-end: var(--#{$nav}__section--last-child--PaddingBottom);
   }
 }
 
 // Section title
 .#{$nav}__section-title {
-  padding: var(--#{$nav}__section-title--PaddingTop) var(--#{$nav}__section-title--PaddingRight) var(--#{$nav}__section-title--PaddingBottom) var(--#{$nav}__section-title--PaddingLeft);
-  margin-bottom: var(--#{$nav}__section-title--MarginBottom);
+  padding-block-start: var(--#{$nav}__section-title--PaddingTop);
+  padding-block-end: var(--#{$nav}__section-title--PaddingBottom);
+  padding-inline-start: var(--#{$nav}__section-title--PaddingLeft);
+  padding-inline-end: var(--#{$nav}__section-title--PaddingRight);
+  margin-block-end: var(--#{$nav}__section-title--MarginBottom);
   font-size: var(--#{$nav}__section-title--FontSize);
   color: var(--#{$nav}__section-title--Color);
-  border-bottom: var(--#{$nav}__section-title--BorderBottomWidth) solid var(--#{$nav}__section-title--BorderBottomColor);
+  border-block-end: var(--#{$nav}__section-title--BorderBottomWidth) solid var(--#{$nav}__section-title--BorderBottomColor);
 }
 
 // Scroll buttons
@@ -1128,11 +1134,12 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
     content: "";
-    border: solid var(--#{$nav}__scroll-button--before--BorderColor);
-    border-width: 0 var(--#{$nav}__scroll-button--before--BorderRightWidth) 0 var(--#{$nav}__scroll-button--before--BorderLeftWidth);
+    border: 0 solid var(--#{$nav}__scroll-button--before--BorderColor);
+    border-inline-start-width: var(--#{$nav}__scroll-button--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$nav}__scroll-button--before--BorderRightWidth);
   }
 
   &:hover {
@@ -1155,22 +1162,22 @@
   &:nth-of-type(1) {
     --#{$nav}__scroll-button--before--BorderRightWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
-    margin-right: calc(var(--#{$nav}__scroll-button--Width) * -1);
+    margin-inline-end: calc(var(--#{$nav}__scroll-button--Width) * -1);
     transform: translateX(-100%);
 
     &::before {
-      right: 0;
+     inset-inline-end: 0;
     }
   }
 
   &:nth-of-type(2) {
     --#{$nav}__scroll-button--before--BorderLeftWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
-    margin-left: calc(var(--#{$nav}__scroll-button--Width) * -1);
+    margin-inline-start: calc(var(--#{$nav}__scroll-button--Width) * -1);
     transform: translateX(100%);
 
     &::before {
-      left: 0;
+     inset-inline-start: 0;
     }
   }
 }

package/components/Nav/themes/dark/nav.scss

@@ -22,11 +22,11 @@
 
   .#{$nav}__link {
     &::before {
-      bottom: 0;
+     inset-block-end: 0;
     }
 
     &::after {
-      top: var(--#{$nav}__item--item__link--after--Top);
+     inset-block-start: var(--#{$nav}__item--item__link--after--Top);
     }
   }
 

package/components/NotificationBadge/notification-badge.css

@@ -34,17 +34,23 @@
   --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
   position: relative;
   display: inline-block;
-  padding: var(--pf-v5-c-notification-badge--PaddingTop) var(--pf-v5-c-notification-badge--PaddingRight) var(--pf-v5-c-notification-badge--PaddingBottom) var(--pf-v5-c-notification-badge--PaddingLeft);
-  margin: var(--pf-v5-c-notification-badge--MarginTop) var(--pf-v5-c-notification-badge--MarginRight) var(--pf-v5-c-notification-badge--MarginBottom) var(--pf-v5-c-notification-badge--MarginLeft);
+  padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-badge--PaddingRight);
+  margin-block-start: var(--pf-v5-c-notification-badge--MarginTop);
+  margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
   background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
   border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
 }
 .pf-v5-c-notification-badge::before {
   position: absolute;
-  top: var(--pf-v5-c-notification-badge--after--Top);
-  right: var(--pf-v5-c-notification-badge--after--Right);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
   width: var(--pf-v5-c-notification-badge--after--Width);
   height: var(--pf-v5-c-notification-badge--after--Height);
   content: "";
@@ -95,7 +101,7 @@
 }
 
 .pf-v5-c-notification-badge__count {
-  margin-left: var(--pf-v5-c-notification-badge__count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {

package/components/NotificationBadge/notification-badge.scss

@@ -53,17 +53,23 @@
 
   position: relative;
   display: inline-block;
-  padding: var(--#{$notification-badge}--PaddingTop) var(--#{$notification-badge}--PaddingRight) var(--#{$notification-badge}--PaddingBottom) var(--#{$notification-badge}--PaddingLeft);
-  margin: var(--#{$notification-badge}--MarginTop) var(--#{$notification-badge}--MarginRight) var(--#{$notification-badge}--MarginBottom) var(--#{$notification-badge}--MarginLeft);
+  padding-block-start: var(--#{$notification-badge}--PaddingTop);
+  padding-block-end: var(--#{$notification-badge}--PaddingBottom);
+  padding-inline-start: var(--#{$notification-badge}--PaddingLeft);
+  padding-inline-end: var(--#{$notification-badge}--PaddingRight);
+  margin-block-start: var(--#{$notification-badge}--MarginTop);
+  margin-block-end: var(--#{$notification-badge}--MarginBottom);
+  margin-inline-start: var(--#{$notification-badge}--MarginLeft);
+  margin-inline-end: var(--#{$notification-badge}--MarginRight);
   background-color: var(--#{$notification-badge}--after--BackgroundColor); // rename this at breaking change
   border-radius: var(--#{$notification-badge}--after--BorderRadius); // renamie this at breaking change
 
   &::before { // update all --after vars to --before at breaking change
     position: absolute;
-    top: var(--#{$notification-badge}--after--Top); // replace this var with 0 at breaking change
-    right: var(--#{$notification-badge}--after--Right); // replace this var with 0 at breaking change
-    bottom: 0;
-    left: 0;
+    inset-block-start: var(--#{$notification-badge}--after--Top); // replace this var with 0 at breaking change
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: var(--#{$notification-badge}--after--Right); // replace this var with 0 at breaking change
     width: var(--#{$notification-badge}--after--Width); // remove at breaking change
     height: var(--#{$notification-badge}--after--Height); // remove at breaking change
     content: "";
@@ -128,7 +134,7 @@
 }
 
 .#{$notification-badge}__count {
-  margin-left: var(--#{$notification-badge}__count--MarginLeft);
+  margin-inline-start: var(--#{$notification-badge}__count--MarginLeft);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/NotificationDrawer/notification-drawer.css

@@ -80,7 +80,10 @@
   display: flex;
   flex-shrink: 0;
   align-items: baseline;
-  padding: var(--pf-v5-c-notification-drawer__header--PaddingTop) var(--pf-v5-c-notification-drawer__header--PaddingRight) var(--pf-v5-c-notification-drawer__header--PaddingBottom) var(--pf-v5-c-notification-drawer__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-notification-drawer__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-drawer__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__header--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__header--BackgroundColor);
   box-shadow: var(--pf-v5-c-notification-drawer__header--BoxShadow);
 }
@@ -90,13 +93,13 @@
 }
 
 .pf-v5-c-notification-drawer__header-status {
-  margin-left: var(--pf-v5-c-notification-drawer__header-status--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-notification-drawer__header-status--MarginLeft);
 }
 
 .pf-v5-c-notification-drawer__header-action {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .pf-v5-c-notification-drawer__body {
@@ -109,9 +112,12 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
-  padding: var(--pf-v5-c-notification-drawer__list-item--PaddingTop) var(--pf-v5-c-notification-drawer__list-item--PaddingRight) var(--pf-v5-c-notification-drawer__list-item--PaddingBottom) var(--pf-v5-c-notification-drawer__list-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-notification-drawer__list-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-drawer__list-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__list-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__list-item--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__list-item--BackgroundColor);
-  border-bottom: var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-v5-c-notification-drawer__list-item--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-v5-c-notification-drawer__list-item--BorderBottomColor);
   outline-offset: var(--pf-v5-c-notification-drawer__list-item--OutlineOffset);
   box-shadow: var(--pf-v5-c-notification-drawer__list-item--BoxShadow);
 }
@@ -124,8 +130,8 @@
 }
 .pf-v5-c-notification-drawer__list-item::before {
   position: absolute;
-  top: var(--pf-v5-c-notification-drawer__list-item--before--Top);
-  bottom: var(--pf-v5-c-notification-drawer__list-item--before--Bottom);
+  inset-block-start: var(--pf-v5-c-notification-drawer__list-item--before--Top);
+  inset-block-end: var(--pf-v5-c-notification-drawer__list-item--before--Bottom);
   width: var(--pf-v5-c-notification-drawer__list-item--before--Width);
   content: "";
   background-color: var(--pf-v5-c-notification-drawer__list-item--before--BackgroundColor);
@@ -172,11 +178,11 @@
   grid-row: 1/2;
   grid-column: 1/2;
   align-items: baseline;
-  margin-bottom: var(--pf-v5-c-notification-drawer__list-item-header--MarginBottom);
+  margin-block-end: var(--pf-v5-c-notification-drawer__list-item-header--MarginBottom);
 }
 
 .pf-v5-c-notification-drawer__list-item-header-icon {
-  margin-right: var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight);
   color: var(--pf-v5-c-notification-drawer__list-item-header-icon--Color);
 }
 
@@ -199,7 +205,7 @@
 .pf-v5-c-notification-drawer__list-item-description {
   grid-row: 2/3;
   grid-column: 1/2;
-  margin-bottom: var(--pf-v5-c-notification-drawer__list-item-description--MarginBottom);
+  margin-block-end: var(--pf-v5-c-notification-drawer__list-item-description--MarginBottom);
   word-break: break-word;
 }
 
@@ -219,7 +225,7 @@
   min-height: var(--pf-v5-c-notification-drawer__group--m-expanded--MinHeight);
 }
 .pf-v5-c-notification-drawer__group.pf-m-expanded + .pf-v5-c-notification-drawer__group {
-  border-top: var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor);
+  border-block-start: var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor);
 }
 .pf-v5-c-notification-drawer__group .pf-v5-c-notification-drawer__list-item:last-child {
   --pf-v5-c-notification-drawer__list-item--BorderBottomWidth: 0;
@@ -230,10 +236,13 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding: var(--pf-v5-c-notification-drawer__group-toggle--PaddingTop) var(--pf-v5-c-notification-drawer__group-toggle--PaddingRight) var(--pf-v5-c-notification-drawer__group-toggle--PaddingBottom) var(--pf-v5-c-notification-drawer__group-toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-notification-drawer__group-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-drawer__group-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__group-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__group-toggle--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__group-toggle--BackgroundColor);
-  border: solid var(--pf-v5-c-notification-drawer__group-toggle--BorderColor);
-  border-width: 0 0 var(--pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
+  border: 0 solid var(--pf-v5-c-notification-drawer__group-toggle--BorderColor);
+  border-block-end-width: var(--pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth);
   outline-offset: var(--pf-v5-c-notification-drawer__group-toggle--OutlineOffset);
 }
 
@@ -243,18 +252,18 @@
   -webkit-line-clamp: var(--pf-v5-c-notification-drawer__group-toggle-title--max-lines);
   overflow: hidden;
   flex: 1;
-  margin-right: var(--pf-v5-c-notification-drawer__group-toggle-title--MarginRight);
-  text-align: left;
+  margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-title--MarginRight);
+  text-align: start;
   word-break: break-word;
 }
 
 .pf-v5-c-notification-drawer__group-toggle-count {
-  margin-right: var(--pf-v5-c-notification-drawer__group-toggle-count--MarginRight);
-  margin-left: auto;
+  margin-inline-start: auto;
+  margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-count--MarginRight);
 }
 
 .pf-v5-c-notification-drawer__group-toggle-icon {
-  margin-right: var(--pf-v5-c-notification-drawer__group-toggle-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-icon--MarginRight);
   color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
 }