@patternfly/patternfly 5.1.0-prerelease.9 → 5.2.0-prerelease.1

package/components/DualListSelector/dual-list-selector.css

@@ -130,11 +130,15 @@
   --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
 }
 .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
+  transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
-  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
+  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
 }
@@ -233,7 +237,7 @@
   padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
 }
 
-:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
   scale: -1 1;
 }
 

package/components/DualListSelector/dual-list-selector.scss

@@ -168,10 +168,15 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
     --#{$dual-list-selector}__item-toggle--MarginBottom: 0;
 
     .#{$dual-list-selector}__item-toggle {
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX)),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX))}),
+      ); 
+
       position: absolute;
       inset-block-start: 0;
       inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
-      transform: translateX(calc(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
     }
   }
 
@@ -295,7 +300,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
 }
 
 :is(.#{$dual-list-selector}__controls-item, .#{$dual-list-selector}__item-toggle-icon) {
-  @include pf-v5-rtl("flip-inline");
+  @include pf-v5-mirror-inline-on-rtl;
 }
 
 .#{$dual-list-selector}__item-main {

package/components/ExpandableSection/expandable-section.css

@@ -117,6 +117,10 @@
   transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -147,6 +147,8 @@
 }
 
 .#{$expandable-section}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);
   transition: var(--#{$expandable-section}__toggle-icon--Transition);

package/components/Form/form.css

@@ -453,6 +453,9 @@
   transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-form__field-group-header {
   display: flex;

package/components/Form/form.scss

@@ -465,6 +465,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   text-align: center;
   transition: var(--#{$form}__field-group-toggle-icon--Transition);
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
+
+  @include pf-v5-mirror-inline-on-rtl;
 }
 
 .#{$form}__field-group-header {

package/components/Icon/icon.scss

@@ -144,7 +144,7 @@
 // Progress element
 .#{$icon}__progress {
   position: absolute;
- inset-block-start: calc(50% + calc(.5 * var(--#{$icon}__content--svg--VerticalAlign)));
+  inset-block-start: calc(50% + calc(.5 * var(--#{$icon}__content--svg--VerticalAlign)));
   opacity: var(--#{$icon}__progress--Opacity, 0);
   transform: translateY(calc(-50% - calc(.5 * var(--#{$icon}__content--svg--VerticalAlign))));
 }

package/components/JumpLinks/jump-links.css

@@ -252,6 +252,9 @@
   transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-jump-links__toggle-text {
   margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);

package/components/JumpLinks/jump-links.scss

@@ -230,6 +230,8 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 }
 
 .#{$jump-links}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);
   transition: var(--#{$jump-links}__toggle-icon--Transition);

package/components/Menu/menu.css

@@ -259,6 +259,10 @@
 .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
   --pf-v5-c-menu--BoxShadow: none;
   position: absolute;
@@ -270,6 +274,10 @@
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
   position: relative;
   overflow: hidden;
@@ -569,6 +577,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
   color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
   margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);

package/components/Menu/menu.scss

@@ -282,7 +282,11 @@
       // target first list in menu
       > .#{$menu}__content > .#{$menu}__list,
       > .#{$menu}__list {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );    
       }
       // stylelint-enable
     }
@@ -299,7 +303,11 @@
 
       // stylelint-disable selector-max-class
       &.pf-m-drilled-in {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );
       }
       // stylelint-enable
     }
@@ -686,6 +694,8 @@
 
 // Toggle icon
 .#{$menu}__item-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
   padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
   color: var(--#{$menu}__item-toggle-icon, inherit);

package/components/Nav/nav.css

@@ -414,6 +414,10 @@
 .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
   margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
   content: none;
 }
@@ -857,6 +861,10 @@
   display: inline-block;
   transition: var(--pf-v5-c-nav__toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
   transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
@@ -912,6 +920,10 @@
   opacity: 0;
   transition: var(--pf-v5-c-nav__scroll-button--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__scroll-button::before {
   position: absolute;
   inset-block-start: 0;
@@ -939,6 +951,10 @@
   margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
   inset-inline-end: 0;
 }
@@ -947,6 +963,10 @@
   margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
+  transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
   inset-inline-start: 0;
 }

package/components/Nav/nav.scss

@@ -508,6 +508,8 @@
   }
 
   .#{$menu}__item-toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     margin-inline-start: calc(var(--#{$menu}__item-toggle-icon--PaddingLeft) * -1);
   }
 
@@ -1064,6 +1066,8 @@
   display: inline-block;
   transition: var(--#{$nav}__toggle-icon--Transition);
 
+  @include pf-v5-mirror-inline-on-rtl;
+
   .#{$nav}__item.pf-m-expanded & {
     transform: rotate(var(--#{$nav}__item--m-expanded__toggle-icon--Rotate));
   }
@@ -1132,6 +1136,12 @@
   opacity: 0;
   transition: var(--#{$nav}__scroll-button--Transition);
 
+  // Mirror only the contents to avoid flipping the borders
+  // TODO at breaking change, add an icon wrapper to be mirrored
+  > * {
+    @include pf-v5-mirror-inline-on-rtl;
+  }
+
   &::before {
     position: absolute;
     inset-block-start: 0;
@@ -1163,8 +1173,13 @@
     --#{$nav}__scroll-button--before--BorderRightWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-end: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(-100%);
 
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(-100%),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+    );
+  
     &::before {
      inset-inline-end: 0;
     }
@@ -1174,7 +1189,12 @@
     --#{$nav}__scroll-button--before--BorderLeftWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-start: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(100%);
+
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(100%),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(100%)})
+    );
 
     &::before {
      inset-inline-start: 0;

package/components/NotificationDrawer/notification-drawer.css

@@ -267,6 +267,10 @@
   color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/components/NotificationDrawer/notification-drawer.scss

@@ -307,6 +307,8 @@
 }
 
 .#{$notification-drawer}__group-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
   color: var(--#{$notification-drawer}__group-toggle-icon--Color);
   transition: var(--#{$notification-drawer}__group-toggle-icon--Transition);

package/components/Page/page.css

@@ -399,6 +399,10 @@
   transition: var(--pf-v5-c-page__sidebar--Transition);
   transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
+  transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
+}
+
 .pf-v5-c-page__sidebar.pf-m-expanded {
   --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);

package/components/Page/page.scss

@@ -404,7 +404,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
   transition: var(--#{$page}__sidebar--Transition);
-  transform: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ));
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
+  );
 
   // Mobile
   // Expanded nav

package/components/Pagination/pagination.css

@@ -196,7 +196,7 @@
   justify-content: flex-end;
 }
 
-:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
   scale: -1 1;
 }
 

package/components/Pagination/pagination.scss

@@ -237,7 +237,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // nav control
 .#{$pagination}__nav-control {
-  @include pf-v5-rtl("flip-inline");
+  @include pf-v5-mirror-inline-on-rtl;
 
   .#{$button} {
     padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);

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 {
-  inset-block-end: 0;
-  inset-inline-start: 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 {
-  inset-block-start: 0;
-  inset-inline-start: 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 {
-  inset-block-start: 50%;
-  inset-inline-end: 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 {
-  inset-block-start: 50%;
-  inset-inline-start: 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 {
-  inset-block-start: 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 {
-  inset-block-start: auto;
-  inset-block-end: 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 {
-  inset-inline-start: 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 {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+.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);
@@ -136,11 +158,18 @@
 
 .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 {