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

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);
@@ -193,6 +200,9 @@
 .pf-v5-c-accordion__toggle-icon {
   transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-accordion__expandable-content {
   font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -208,13 +218,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);
@@ -223,6 +230,8 @@
 }
 
 .#{$accordion}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 
@@ -242,13 +251,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 {
@@ -156,12 +159,15 @@
   transition: var(--pf-v5-c-alert__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
+  scale: -1 1;
+}
 
 .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 +187,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 +196,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 +207,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,12 +193,14 @@
 }
 
 .#{$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 {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   display: inline-block;
   transition: var(--#{$alert}__toggle-icon--Transition);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));
@@ -204,8 +209,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 +228,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 +238,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 +250,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);