@patternfly/patternfly 5.1.0-prerelease.31 → 5.1.0-prerelease.32

package/components/Popover/popover.css

@@ -63,85 +63,59 @@
 }
 .pf-v5-c-popover:is(.pf-m-top,
 .pf-m-top-left,
-.pf-m-top-right,
-.pf-m-block-start,
-.pf-m-block-start-inline-start,
-.pf-m-block-start-inline-end) .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-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);
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
-  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) 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-m-block-end,
-.pf-m-block-end-inline-start,
-.pf-m-block-end-inline-end) .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));
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
-  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
+.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-m-inline-start,
-.pf-m-inline-start-block-start,
-.pf-m-inline-start-block-end) .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));
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
-  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
+.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-m-inline-end,
-.pf-m-inline-end-block-start,
-.pf-m-inline-end-block-end) .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));
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
-  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
+.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-m-inline-start-block-start,
-.pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
-  inset-block-start: var(--pf-v5-c-popover__arrow--Height);
+.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-m-inline-start-block-end,
-.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
-  inset-block-start: auto;
-  inset-block-end: 0;
+.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-m-block-start-inline-start,
-.pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
-  inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
+.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-m-block-start-inline-end,
-.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+.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);
@@ -184,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 {

package/components/Popover/popover.scss

@@ -91,127 +91,81 @@
   &:is(
     .pf-m-top,
     .pf-m-top-left,
-    .pf-m-top-right,
-    .pf-m-block-start,
-    .pf-m-block-start-inline-start,
-    .pf-m-block-start-inline-end
+    .pf-m-top-right
   ) {
-    .#{$popover}__arrow {
-      inset-block-end: 0;
-      inset-inline-start: 50%;
-
-      @include pf-v5-bidirectional-style(
-        $prop: transform,
-        $ltr-val: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate)),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-top--TranslateX))}) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate))
-      );
-    }
+    --#{$popover}__arrow--Bottom: var(--#{$popover}--m-top--Bottom, 0);
+    --#{$popover}__arrow--Left: var(--#{$popover}--m-top--Left, 50%);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-top--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-top--Rotate);
   }
 
   &:is(
     .pf-m-bottom,
     .pf-m-bottom-left,
-    .pf-m-bottom-right,
-    .pf-m-block-end,
-    .pf-m-block-end-inline-start,
-    .pf-m-block-end-inline-end
-  ) {
-    .#{$popover}__arrow {
-      inset-block-start: 0;
-      inset-inline-start: 50%;
-
-      @include pf-v5-bidirectional-style(
-        $prop: transform,
-        $ltr-val: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate)),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-bottom--TranslateX))}) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate))
-      );
-    }
+    .pf-m-bottom-right
+   ) {
+    --#{$popover}__arrow--Top: var(--#{$popover}--m-bottom--Top, 0);
+    --#{$popover}__arrow--Left: var(--#{$popover}--m-bottom--Left, 50%);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-bottom--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-bottom--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-bottom--Rotate);
   }
 
   &:is(
     .pf-m-left,
     .pf-m-left-top,
-    .pf-m-left-bottom,
-    .pf-m-inline-start,
-    .pf-m-inline-start-block-start,
-    .pf-m-inline-start-block-end
+    .pf-m-left-bottom
   ) {
-    .#{$popover}__arrow {
-      inset-block-start: 50%;
-      inset-inline-end: 0;
-
-      @include pf-v5-bidirectional-style(
-        $prop: transform,
-        $ltr-val: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate)),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-left--TranslateX))}) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate))
-      );
-    }
+    --#{$popover}__arrow--Top: var(--#{$popover}--m-left--Top, 50%);
+    --#{$popover}__arrow--Right: var(--#{$popover}--m-left--Right, 0);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-left--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-left--Rotate);
   }
 
   &:is(
     .pf-m-right,
     .pf-m-right-top,
-    .pf-m-right-bottom,
-    .pf-m-inline-end,
-    .pf-m-inline-end-block-start,
-    .pf-m-inline-end-block-end
+    .pf-m-right-bottom
   ) {
-    .#{$popover}__arrow {
-      inset-block-start: 50%;
-      inset-inline-start: 0;
-
-      @include pf-v5-bidirectional-style(
-        $prop: transform,
-        $ltr-val: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate)),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-right--TranslateX))}) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate))
-      );
-    }
+    --#{$popover}__arrow--Top: var(--#{$popover}--m-right--Top, 50%);
+    --#{$popover}__arrow--Left: var(--#{$popover}--m-right--Left, 0);
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-right--TranslateX);
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-right--TranslateY);
+    --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-right--Rotate);
   }
 
   &:is(
     .pf-m-left-top,
-    .pf-m-right-top,
-    .pf-m-inline-start-block-start,
-    .pf-m-inline-end-block-start
+    .pf-m-right-top
   ) {
-    .#{$popover}__arrow {
-      inset-block-start: var(--#{$popover}__arrow--Height);
-    }
+    --#{$popover}__arrow--Top: 0;
+    --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
   }
 
   &:is(
     .pf-m-left-bottom,
-    .pf-m-right-bottom,
-    .pf-m-inline-start-block-end,
-    .pf-m-inline-end-block-end
+    .pf-m-right-bottom
   ) {
-    .#{$popover}__arrow {
-      inset-block-start: auto;
-      inset-block-end: 0;
-    }
+    --#{$popover}__arrow--Top: auto;
+    --#{$popover}__arrow--Bottom: 0;
   }
 
   &:is(
     .pf-m-top-left,
-    .pf-m-bottom-left,
-    .pf-m-block-start-inline-start,
-    .pf-m-block-end-inline-start
+    .pf-m-bottom-left
   ) {
-    .#{$popover}__arrow {
-      inset-inline-start: var(--#{$popover}__arrow--Width);
-    }
+    --#{$popover}__arrow--Left: 0;
+    --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
   }
 
   &:is(
     .pf-m-top-right,
-    .pf-m-bottom-right,
-    .pf-m-block-start-inline-end,
-    .pf-m-block-end-inline-end
+    .pf-m-bottom-right
   ) {
-    .#{$popover}__arrow {
-      inset-inline-start: auto;
-      inset-inline-end: 0;
-    }
+    --#{$popover}__arrow--Right: 0;
+    --#{$popover}__arrow--Left: auto;
   }
 
   &.pf-m-danger {
@@ -244,7 +198,7 @@
   position: relative;
   padding-block-start: var(--#{$popover}__content--PaddingTop);
   padding-block-end: var(--#{$popover}__content--PaddingBottom);
-  padding-inline-start: var(--#{$popover}__content--PaddingLeft); 
+  padding-inline-start: var(--#{$popover}__content--PaddingLeft);
   padding-inline-end: var(--#{$popover}__content--PaddingRight);
   background-color: var(--#{$popover}__content--BackgroundColor);
 }
@@ -263,11 +217,18 @@
 
 .#{$popover}__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--#{$popover}__arrow--Top, auto);
+  right: var(--#{$popover}__arrow--Right, auto);
+  bottom: var(--#{$popover}__arrow--Bottom, auto);
+  left: var(--#{$popover}__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--#{$popover}__arrow--Width);
   height: var(--#{$popover}__arrow--Height);
   pointer-events: none;
   background-color: var(--#{$popover}__arrow--BackgroundColor);
   box-shadow: var(--#{$popover}__arrow--BoxShadow);
+  transform: translateX(var(--#{$popover}__arrow--TranslateX, 0)) translateY(var(--#{$popover}__arrow--TranslateY, 0)) rotate(var(--#{$popover}__arrow--Rotate, 0));
 }
 
 .#{$popover}__header {

package/components/Tooltip/tooltip.css

@@ -30,85 +30,59 @@
 }
 .pf-v5-c-tooltip:is(.pf-m-top,
 .pf-m-top-left,
-.pf-m-top-right,
-.pf-m-block-start,
-.pf-m-block-start-inline-start,
-.pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
-  inset-block-end: 0;
-  inset-inline-start: 50%;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
+.pf-m-top-right) {
+  --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
-  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
-}
-
 .pf-v5-c-tooltip:is(.pf-m-bottom,
 .pf-m-bottom-left,
-.pf-m-bottom-right,
-.pf-m-block-end,
-.pf-m-block-end-inline-start,
-.pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
-  inset-block-start: 0;
-  inset-inline-start: 50%;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
-  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
+.pf-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate);
 }
-
 .pf-v5-c-tooltip:is(.pf-m-left,
 .pf-m-left-top,
-.pf-m-left-bottom,
-.pf-m-inline-start,
-.pf-m-inline-start-block-start,
-.pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
-  inset-block-start: 50%;
-  inset-inline-end: 0;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
-  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
+.pf-m-left-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
+  --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-left--Rotate);
 }
-
 .pf-v5-c-tooltip:is(.pf-m-right,
 .pf-m-right-top,
-.pf-m-right-bottom,
-.pf-m-inline-end,
-.pf-m-inline-end-block-start,
-.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
-  inset-block-start: 50%;
-  inset-inline-start: 0;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
-  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
+.pf-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-right--Rotate);
 }
-
 .pf-v5-c-tooltip:is(.pf-m-left-top,
-.pf-m-right-top,
-.pf-m-inline-start-block-start,
-.pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
-  inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
+.pf-m-right-top) {
+  --pf-v5-c-tooltip__arrow--Top: 0;
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
 }
 .pf-v5-c-tooltip:is(.pf-m-left-bottom,
-.pf-m-right-bottom,
-.pf-m-inline-start-block-end,
-.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
-  inset-block-start: auto;
-  inset-block-end: 0;
+.pf-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: auto;
+  --pf-v5-c-tooltip__arrow--Bottom: 0;
 }
 .pf-v5-c-tooltip:is(.pf-m-top-left,
-.pf-m-bottom-left,
-.pf-m-block-start-block-start,
-.pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
-  inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
+.pf-m-bottom-left) {
+  --pf-v5-c-tooltip__arrow--Left: 0;
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
 }
 .pf-v5-c-tooltip:is(.pf-m-top-right,
-.pf-m-bottom-right,
-.pf-m-block-start-block-end,
-.pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+.pf-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Right: 0;
+  --pf-v5-c-tooltip__arrow--Left: auto;
 }
 
 .pf-v5-c-tooltip__content {
@@ -123,17 +97,24 @@
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
 }
-.pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
+.pf-v5-c-tooltip__content.pf-m-text-align-left {
   text-align: start;
 }
 
 .pf-v5-c-tooltip__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--pf-v5-c-tooltip__arrow--Top, auto);
+  right: var(--pf-v5-c-tooltip__arrow--Right, auto);
+  bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
+  left: var(--pf-v5-c-tooltip__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--pf-v5-c-tooltip__arrow--Width);
   height: var(--pf-v5-c-tooltip__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
+  transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-tooltip {