@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.21

package/components/Pagination/pagination.css

@@ -67,8 +67,8 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  padding-right: var(--pf-v5-c-pagination--PaddingRight);
-  padding-left: var(--pf-v5-c-pagination--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
 }
 @media screen and (min-width: 768px) {
   .pf-v5-c-pagination {
@@ -93,7 +93,7 @@
   }
 }
 .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
-  margin-right: var(--pf-v5-c-pagination--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
 }
 .pf-v5-c-pagination .pf-v5-c-menu-toggle {
   display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
@@ -106,7 +106,7 @@
   --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
   --pf-v5-c-pagination--m-sticky--Top: auto;
   position: sticky;
-  bottom: var(--pf-v5-c-pagination--m-bottom--Bottom);
+  inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
   justify-content: center;
   background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
@@ -143,7 +143,10 @@
     --pf-v5-c-pagination--m-bottom--Bottom: auto;
     position: relative;
     justify-content: flex-end;
-    padding: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop) var(--pf-v5-c-pagination--m-bottom--md--PaddingRight) var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom) var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
+    padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
@@ -164,18 +167,21 @@
 .pf-v5-c-pagination.pf-m-sticky {
   --pf-v5-c-pagination--m-bottom--Bottom: 0;
   position: sticky;
-  top: var(--pf-v5-c-pagination--m-sticky--Top);
+  inset-block-start: var(--pf-v5-c-pagination--m-sticky--Top);
   z-index: var(--pf-v5-c-pagination--m-sticky--ZIndex);
-  padding-top: var(--pf-v5-c-pagination--m-sticky--PaddingTop);
-  padding-right: var(--pf-v5-c-pagination--m-sticky--PaddingRight);
-  padding-bottom: var(--pf-v5-c-pagination--m-sticky--PaddingBottom);
-  padding-left: var(--pf-v5-c-pagination--m-sticky--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-pagination--m-sticky--PaddingTop);
+  padding-block-end: var(--pf-v5-c-pagination--m-sticky--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-pagination--m-sticky--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination--m-sticky--PaddingRight);
   background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
   box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
 }
 @media screen and (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-sticky {
-    padding: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop) var(--pf-v5-c-pagination--m-sticky--md--PaddingRight) var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom) var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
+    padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
+    padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
+    padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
+    padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
   }
 }
 .pf-v5-c-pagination.pf-m-compact {
@@ -190,27 +196,31 @@
   justify-content: flex-end;
 }
 
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
+  scale: -1 1;
+}
+
 .pf-v5-c-pagination__nav-control .pf-v5-c-button {
-  padding-right: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
-  padding-left: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
   font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
 }
 .pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
-  margin-left: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
 }
 
 .pf-v5-c-pagination__nav-page-select {
   display: flex;
   align-items: center;
-  padding-right: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
-  padding-left: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
 }
 .pf-v5-c-pagination__nav-page-select > * {
   font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
   white-space: nowrap;
 }
 .pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
-  margin-right: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
 }
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);

package/components/Pagination/pagination.scss

@@ -104,13 +104,13 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  padding-right: var(--#{$pagination}--PaddingRight);
-  padding-left: var(--#{$pagination}--PaddingLeft);
+  padding-inline-start: var(--#{$pagination}--PaddingLeft);
+  padding-inline-end: var(--#{$pagination}--PaddingRight);
 
   // stylelint-disable selector-not-notation
   // update to single :not() in breaking change
   > *:not(:last-child):not(.#{$pagination}__total-items) {
-    margin-right: var(--#{$pagination}--child--MarginRight);
+    margin-inline-end: var(--#{$pagination}--child--MarginRight);
   }
 
   .#{$menu-toggle} {
@@ -135,7 +135,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     }
 
     position: sticky;
-    bottom: var(--#{$pagination}--m-bottom--Bottom);
+   inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
     justify-content: center;
     background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
@@ -172,7 +172,10 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
       position: relative;
       justify-content: flex-end;
-      padding: var(--#{$pagination}--m-bottom--md--PaddingTop) var(--#{$pagination}--m-bottom--md--PaddingRight) var(--#{$pagination}--m-bottom--md--PaddingBottom) var(--#{$pagination}--m-bottom--md--PaddingLeft);
+      padding-block-start: var(--#{$pagination}--m-bottom--md--PaddingTop);
+      padding-block-end: var(--#{$pagination}--m-bottom--md--PaddingBottom);
+      padding-inline-start: var(--#{$pagination}--m-bottom--md--PaddingLeft);
+      padding-inline-end: var(--#{$pagination}--m-bottom--md--PaddingRight);
 
       .#{$pagination}__nav-control.pf-m-first,
       .#{$pagination}__nav-control.pf-m-last,
@@ -199,17 +202,20 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     --#{$pagination}--m-bottom--Bottom: 0;
 
     position: sticky;
-    top: var(--#{$pagination}--m-sticky--Top);
+    inset-block-start: var(--#{$pagination}--m-sticky--Top);
     z-index: var(--#{$pagination}--m-sticky--ZIndex);
-    padding-top: var(--#{$pagination}--m-sticky--PaddingTop);
-    padding-right: var(--#{$pagination}--m-sticky--PaddingRight);
-    padding-bottom: var(--#{$pagination}--m-sticky--PaddingBottom);
-    padding-left: var(--#{$pagination}--m-sticky--PaddingLeft);
+    padding-block-start: var(--#{$pagination}--m-sticky--PaddingTop);
+    padding-block-end: var(--#{$pagination}--m-sticky--PaddingBottom);
+    padding-inline-start: var(--#{$pagination}--m-sticky--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}--m-sticky--PaddingRight);
     background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
 
     @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-      padding: var(--#{$pagination}--m-sticky--md--PaddingTop) var(--#{$pagination}--m-sticky--md--PaddingRight) var(--#{$pagination}--m-sticky--md--PaddingBottom) var(--#{$pagination}--m-sticky--md--PaddingLeft);
+      padding-block-start: var(--#{$pagination}--m-sticky--md--PaddingTop);
+      padding-block-end: var(--#{$pagination}--m-sticky--md--PaddingBottom);
+      padding-inline-start: var(--#{$pagination}--m-sticky--md--PaddingLeft);
+      padding-inline-end: var(--#{$pagination}--m-sticky--md--PaddingRight);
     }
   }
 
@@ -231,14 +237,16 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // nav control
 .#{$pagination}__nav-control {
+  @include pf-v5-mirror-inline-on-rtl;
+
   .#{$button} {
-    padding-right: var(--#{$pagination}__nav-control--c-button--PaddingRight);
-    padding-left: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
+    padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}__nav-control--c-button--PaddingRight);
     font-size: var(--#{$pagination}__nav-control--c-button--FontSize);
   }
 
   .#{$pagination}.pf-m-compact & + & {
-    margin-left: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
+    margin-inline-start: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
   }
 }
 
@@ -246,15 +254,15 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 .#{$pagination}__nav-page-select {
   display: flex;
   align-items: center;
-  padding-right: var(--#{$pagination}__nav-page-select--PaddingRight);
-  padding-left: var(--#{$pagination}__nav-page-select--PaddingLeft);
+  padding-inline-start: var(--#{$pagination}__nav-page-select--PaddingLeft);
+  padding-inline-end: var(--#{$pagination}__nav-page-select--PaddingRight);
 
   > * {
     font-size: var(--#{$pagination}__nav-page-select--FontSize);
     white-space: nowrap;
 
     &:not(:last-child) {
-      margin-right: var(--#{$pagination}__nav-page-select--child--MarginRight);
+      margin-inline-end: var(--#{$pagination}__nav-page-select--child--MarginRight);
     }
   }
 

package/components/Panel/panel.css

@@ -39,10 +39,7 @@
 }
 .pf-v5-c-panel::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
   border: var(--pf-v5-c-panel--before--BorderWidth) solid var(--pf-v5-c-panel--before--BorderColor);
@@ -62,7 +59,10 @@
 }
 
 .pf-v5-c-panel__header {
-  padding: var(--pf-v5-c-panel__header--PaddingTop) var(--pf-v5-c-panel__header--PaddingRight) var(--pf-v5-c-panel__header--PaddingBottom) var(--pf-v5-c-panel__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__header--PaddingRight);
 }
 
 .pf-v5-c-panel__main {
@@ -71,11 +71,17 @@
 }
 
 .pf-v5-c-panel__main-body {
-  padding: var(--pf-v5-c-panel__main-body--PaddingTop) var(--pf-v5-c-panel__main-body--PaddingRight) var(--pf-v5-c-panel__main-body--PaddingBottom) var(--pf-v5-c-panel__main-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__main-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__main-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__main-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__main-body--PaddingRight);
 }
 
 .pf-v5-c-panel__footer {
-  padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
 }
 

package/components/Panel/panel.scss

@@ -58,10 +58,7 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
     border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
@@ -85,7 +82,10 @@
 }
 
 .#{$panel}__header {
-  padding: var(--#{$panel}__header--PaddingTop) var(--#{$panel}__header--PaddingRight) var(--#{$panel}__header--PaddingBottom) var(--#{$panel}__header--PaddingLeft);
+  padding-block-start: var(--#{$panel}__header--PaddingTop);
+  padding-block-end: var(--#{$panel}__header--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__header--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__header--PaddingRight);
 }
 
 .#{$panel}__main {
@@ -94,11 +94,17 @@
 }
 
 .#{$panel}__main-body {
-  padding: var(--#{$panel}__main-body--PaddingTop) var(--#{$panel}__main-body--PaddingRight) var(--#{$panel}__main-body--PaddingBottom) var(--#{$panel}__main-body--PaddingLeft);
+  padding-block-start: var(--#{$panel}__main-body--PaddingTop);
+  padding-block-end: var(--#{$panel}__main-body--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__main-body--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__main-body--PaddingRight);
 }
 
 .#{$panel}__footer {
-  padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft);
+  padding-block-start: var(--#{$panel}__footer--PaddingTop);
+  padding-block-end: var(--#{$panel}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
   box-shadow: var(--#{$panel}__footer--BoxShadow);
 }
 

package/components/Popover/popover.css

@@ -61,39 +61,61 @@
   --pf-v5-c-popover--MinWidth: auto;
   --pf-v5-c-popover--MaxWidth: none;
 }
-.pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
-}
-.pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
-  top: 0;
-  left: 50%;
-  transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
-}
-.pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
-  top: 50%;
-  right: 0;
-  transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
-}
-.pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
-  top: 50%;
-  left: 0;
-  transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
-}
-.pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
-  top: var(--pf-v5-c-popover__arrow--Height);
-}
-.pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
-  top: auto;
-  bottom: 0;
-}
-.pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
-  left: var(--pf-v5-c-popover__arrow--Width);
-}
-.pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
-  right: 0;
-  left: auto;
+.pf-v5-c-popover:is(.pf-m-top,
+.pf-m-top-left,
+.pf-m-top-right) {
+  --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
+  --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
+}
+.pf-v5-c-popover:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.pf-m-bottom-right) {
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
+  --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
+}
+.pf-v5-c-popover:is(.pf-m-left,
+.pf-m-left-top,
+.pf-m-left-bottom) {
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
+  --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
+  --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
+}
+.pf-v5-c-popover:is(.pf-m-right,
+.pf-m-right-top,
+.pf-m-right-bottom) {
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
+  --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
+}
+.pf-v5-c-popover:is(.pf-m-left-top,
+.pf-m-right-top) {
+  --pf-v5-c-popover__arrow--Top: 0;
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
+}
+.pf-v5-c-popover:is(.pf-m-left-bottom,
+.pf-m-right-bottom) {
+  --pf-v5-c-popover__arrow--Top: auto;
+  --pf-v5-c-popover__arrow--Bottom: 0;
+}
+.pf-v5-c-popover:is(.pf-m-top-left,
+.pf-m-bottom-left) {
+  --pf-v5-c-popover__arrow--Left: 0;
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
+}
+.pf-v5-c-popover:is(.pf-m-top-right,
+.pf-m-bottom-right) {
+  --pf-v5-c-popover__arrow--Right: 0;
+  --pf-v5-c-popover__arrow--Left: auto;
 }
 .pf-v5-c-popover.pf-m-danger {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -118,30 +140,40 @@
 
 .pf-v5-c-popover__content {
   position: relative;
-  padding: var(--pf-v5-c-popover__content--PaddingTop) var(--pf-v5-c-popover__content--PaddingRight) var(--pf-v5-c-popover__content--PaddingBottom) var(--pf-v5-c-popover__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-popover__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-popover__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
   background-color: var(--pf-v5-c-popover__content--BackgroundColor);
 }
 
 .pf-v5-c-popover__close {
   position: absolute;
-  top: var(--pf-v5-c-popover__close--Top);
-  right: var(--pf-v5-c-popover__close--Right);
+  inset-block-start: var(--pf-v5-c-popover__close--Top);
+  inset-inline-end: var(--pf-v5-c-popover__close--Right);
 }
 .pf-v5-c-popover__close + * {
-  padding-right: var(--pf-v5-c-popover__close--sibling--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-popover__close--sibling--PaddingRight);
 }
 
 .pf-v5-c-popover__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--pf-v5-c-popover__arrow--Top, auto);
+  right: var(--pf-v5-c-popover__arrow--Right, auto);
+  bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
+  left: var(--pf-v5-c-popover__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--pf-v5-c-popover__arrow--Width);
   height: var(--pf-v5-c-popover__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
+  transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
 }
 
 .pf-v5-c-popover__header {
-  margin-bottom: var(--pf-v5-c-popover__header--MarginBottom);
+  margin-block-end: var(--pf-v5-c-popover__header--MarginBottom);
 }
 
 .pf-v5-c-popover__title {
@@ -150,7 +182,7 @@
 }
 
 .pf-v5-c-popover__title-icon {
-  margin-right: var(--pf-v5-c-popover__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-popover__title-icon--MarginRight);
   font-size: var(--pf-v5-c-popover__title-icon--FontSize);
   color: var(--pf-v5-c-popover__title-icon--Color);
 }
@@ -167,7 +199,7 @@
 }
 
 .pf-v5-c-popover__footer {
-  margin-top: var(--pf-v5-c-popover__footer--MarginTop);
+  margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-popover {