@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.10

package/components/Toolbar/toolbar.scss

@@ -5,9 +5,8 @@ $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg",
 $pf-v5-c-toolbar--spacer-map: build-spacer-map("none", "sm", "md", "lg");
 $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-.#{$toolbar} {
+:root {
   --#{$toolbar}--AlignItems--base: flex-start;
-  --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$toolbar}--RowGap--base: var(--#{$pf-global}--spacer--lg); // row-gap between toolbar content elements
   --#{$toolbar}--RowGap: var(--#{$toolbar}--RowGap--base);
   --#{$toolbar}--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -138,7 +137,9 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--m-full-height--PaddingBottom: 0;
   --#{$toolbar}--m-full-height__item--Display: flex;
   --#{$toolbar}--m-full-height__item--AlignItems: center;
+}
 
+.#{$toolbar} {
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
     --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$toolbar}__expandable-content--lg--PaddingBottom);
@@ -152,8 +153,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   position: relative;
   display: grid;
   row-gap: var(--#{$toolbar}--RowGap);
-  padding-top: var(--#{$toolbar}--PaddingTop);
-  padding-bottom: var(--#{$toolbar}--PaddingBottom);
+  padding-block-start: var(--#{$toolbar}--PaddingTop);
+  padding-block-end: var(--#{$toolbar}--PaddingBottom);
   background-color: var(--#{$toolbar}--BackgroundColor);
 
   &.pf-m-page-insets {
@@ -163,7 +164,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   &.pf-m-sticky {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--#{$toolbar}--m-sticky--ZIndex);
     box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
   }
@@ -217,7 +218,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   > .#{$divider}.pf-m-vertical {
-    margin-right: var(--#{$toolbar}--spacer);
+    margin-inline-end: var(--#{$toolbar}--spacer);
 
     &:last-child {
       --#{$toolbar}--spacer: 0;
@@ -258,7 +259,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   row-gap: var(--#{$toolbar}__group--RowGap);
   align-items: var(--#{$toolbar}__group--AlignItems);
   align-self: var(--#{$toolbar}__group--AlignSelf);
-  margin-right: var(--#{$toolbar}--spacer);
+  margin-inline-end: var(--#{$toolbar}--spacer);
 
   // Button group
   &.pf-m-button-group {
@@ -287,7 +288,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     }
 
     > * + * {
-      margin-left: -1px;
+      margin-inline-start: -1px;
     }
   }
 
@@ -323,7 +324,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   align-self: var(--#{$toolbar}__item--AlignSelf);
   width: var(--#{$toolbar}__item--Width--base);
   min-width: var(--#{$toolbar}__item--MinWidth--base);
-  margin-right: var(--#{$toolbar}--spacer);
+  margin-inline-end: var(--#{$toolbar}--spacer);
 
   &.pf-m-align-items-start {
     align-items: flex-start;
@@ -384,7 +385,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Total items
   &.pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
 
     .#{$pagination} {
       flex-wrap: nowrap;
@@ -409,6 +410,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   display: inline-block;
   transition: var(--#{$toolbar}__expand-all-icon--Transition);
   transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
+
+  // @include pf-v5-mirror-inline-on-rtl; - TODO: mirror this icon in breaking change
 }
 
 .#{$toolbar}__content,
@@ -423,8 +426,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   position: relative;
   row-gap: var(--#{$toolbar}__content--RowGap);
   align-items: var(--#{$toolbar}__content--AlignItems);
-  padding-right: var(--#{$toolbar}__content--PaddingRight);
-  padding-left: var(--#{$toolbar}__content--PaddingLeft);
+  padding-inline-start: var(--#{$toolbar}__content--PaddingLeft);
+  padding-inline-end: var(--#{$toolbar}__content--PaddingRight);
 }
 
 // Content section
@@ -451,13 +454,16 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 // Expandable content
 .#{$toolbar}__expandable-content {
   position: absolute;
-  top: calc(100% + var(--#{$toolbar}__content--RowGap));
-  right: 0;
-  left: 0;
+  inset-block-start: calc(100% + var(--#{$toolbar}__content--RowGap));
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--#{$toolbar}__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--#{$toolbar}__expandable-content--PaddingTop) var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
+  padding-block-start: var(--#{$toolbar}__expandable-content--PaddingTop);
+  padding-block-end: var(--#{$toolbar}__expandable-content--PaddingBottom);
+  padding-inline-start: var(--#{$toolbar}__expandable-content--PaddingLeft);
+  padding-inline-end: var(--#{$toolbar}__expandable-content--PaddingRight);
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 
@@ -482,7 +488,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   .#{$toolbar}__item.pf-m-label {
-    margin-bottom: var(--#{$toolbar}__expandable-content__item--m-label--MarginBottom);
+    margin-block-end: var(--#{$toolbar}__expandable-content__item--m-label--MarginBottom);
     font-size: var(--#{$toolbar}__expandable-content__item--m-label--FontSize);
   }
 }
@@ -495,13 +501,13 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   flex-wrap: wrap;
   grid-row-gap: 0;
   align-items: baseline;
-  margin-top: var(--#{$toolbar}__group--m-chip-container--MarginTop);
+  margin-block-start: var(--#{$toolbar}__group--m-chip-container--MarginTop);
 
   .#{$toolbar}__item {
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--spacer);
     --#{$toolbar}__item--AlignSelf: auto;
 
-    margin-top: var(--#{$toolbar}__group--m-chip-container__item--MarginTop);
+    margin-block-start: var(--#{$toolbar}__group--m-chip-container__item--MarginTop);
   }
 
   .#{$toolbar}__group {
@@ -562,20 +568,20 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
       // Align right
       .#{$toolbar}__item.pf-m-align-right#{$breakpoint-name},
       .#{$toolbar}__group.pf-m-align-right#{$breakpoint-name} {
-        margin-left: auto;
+        margin-inline-start: auto;
 
         & ~ .pf-m-pagination {
-          margin-left: 0;
+          margin-inline-start: 0;
         }
       }
 
       // Align left
       .#{$toolbar}__item.pf-m-align-left#{$breakpoint-name},
       .#{$toolbar}__group.pf-m-align-left#{$breakpoint-name} {
-        margin-left: 0;
+        margin-inline-start: 0;
 
         & ~ .pf-m-pagination {
-          margin-left: auto;
+          margin-inline-start: auto;
         }
       }
 

package/components/Tooltip/tooltip.css

@@ -28,44 +28,69 @@
   max-width: var(--pf-v5-c-tooltip--MaxWidth);
   box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
 }
-.pf-v5-c-tooltip.pf-m-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow {
-  bottom: 0;
-  left: 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-v5-c-tooltip:is(.pf-m-top,
+.pf-m-top-left,
+.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);
 }
-.pf-v5-c-tooltip.pf-m-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
-  top: 0;
-  left: 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));
+.pf-v5-c-tooltip:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.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.pf-m-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow {
-  top: 50%;
-  right: 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));
+.pf-v5-c-tooltip:is(.pf-m-left,
+.pf-m-left-top,
+.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.pf-m-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
-  top: 50%;
-  left: 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));
+.pf-v5-c-tooltip:is(.pf-m-right,
+.pf-m-right-top,
+.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.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow {
-  top: var(--pf-v5-c-tooltip__arrow--Height);
+.pf-v5-c-tooltip:is(.pf-m-left-top,
+.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.pf-m-left-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
-  top: auto;
-  bottom: 0;
+.pf-v5-c-tooltip:is(.pf-m-left-bottom,
+.pf-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: auto;
+  --pf-v5-c-tooltip__arrow--Bottom: 0;
 }
-.pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow {
-  left: var(--pf-v5-c-tooltip__arrow--Width);
+.pf-v5-c-tooltip:is(.pf-m-top-left,
+.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.pf-m-top-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
-  right: 0;
-  left: auto;
+.pf-v5-c-tooltip:is(.pf-m-top-right,
+.pf-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Right: 0;
+  --pf-v5-c-tooltip__arrow--Left: auto;
 }
 
 .pf-v5-c-tooltip__content {
   position: relative;
-  padding: var(--pf-v5-c-tooltip__content--PaddingTop) var(--pf-v5-c-tooltip__content--PaddingRight) var(--pf-v5-c-tooltip__content--PaddingBottom) var(--pf-v5-c-tooltip__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tooltip__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tooltip__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tooltip__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tooltip__content--PaddingRight);
   font-size: var(--pf-v5-c-tooltip__content--FontSize);
   color: var(--pf-v5-c-tooltip__content--Color);
   text-align: center;
@@ -73,16 +98,23 @@
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
 }
 .pf-v5-c-tooltip__content.pf-m-text-align-left {
-  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 {

package/components/Tooltip/tooltip.scss

@@ -36,80 +36,93 @@
   max-width: var(--#{$tooltip}--MaxWidth);
   box-shadow: var(--#{$tooltip}--BoxShadow);
 
-  &.pf-m-top,
-  &.pf-m-top-left,
-  &.pf-m-top-right {
-    .#{$tooltip}__arrow {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(var(--#{$tooltip}__arrow--m-top--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate));
-    }
+  &:is(
+    .pf-m-top,
+    .pf-m-top-left,
+    .pf-m-top-right
+  ) {
+    --#{$tooltip}__arrow--Bottom: var(--#{$tooltip}--m-top--Bottom, 0);
+    --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-top--Left, 50%);
+    --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-top--TranslateX);
+    --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-top--TranslateY);
+    --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-top--Rotate);
   }
 
-  &.pf-m-bottom,
-  &.pf-m-bottom-left,
-  &.pf-m-bottom-right {
-    .#{$tooltip}__arrow {
-      top: 0;
-      left: 50%;
-      transform: translateX(var(--#{$tooltip}__arrow--m-bottom--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate));
-    }
+  &:is(
+    .pf-m-bottom,
+    .pf-m-bottom-left,
+    .pf-m-bottom-right
+   ) {
+    --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
+    --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
+    --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
+    --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-bottom--TranslateY);
+    --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-bottom--Rotate);
   }
 
-  &.pf-m-left,
-  &.pf-m-left-top,
-  &.pf-m-left-bottom {
-    .#{$tooltip}__arrow {
-      top: 50%;
-      right: 0;
-      transform: translateX(var(--#{$tooltip}__arrow--m-left--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate));
-    }
+  &:is(
+    .pf-m-left,
+    .pf-m-left-top,
+    .pf-m-left-bottom
+  ) {
+    --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-left--Top, 50%);
+    --#{$tooltip}__arrow--Right: var(--#{$tooltip}--m-left--Right, 0);
+    --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-left--TranslateX);
+    --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-left--TranslateY);
+    --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-left--Rotate);
   }
 
-  &.pf-m-right,
-  &.pf-m-right-top,
-  &.pf-m-right-bottom {
-    .#{$tooltip}__arrow {
-      top: 50%;
-      left: 0;
-      transform: translateX(var(--#{$tooltip}__arrow--m-right--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate));
-    }
+  &:is(
+    .pf-m-right,
+    .pf-m-right-top,
+    .pf-m-right-bottom
+  ) {
+    --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-right--Top, 50%);
+    --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-right--Left, 0);
+    --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-right--TranslateX);
+    --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-right--TranslateY);
+    --#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-right--Rotate);
   }
 
-  &.pf-m-left-top,
-  &.pf-m-right-top {
-    .#{$tooltip}__arrow {
-      top: var(--#{$tooltip}__arrow--Height);
-    }
+  &:is(
+    .pf-m-left-top,
+    .pf-m-right-top
+  ) {
+    --#{$tooltip}__arrow--Top: 0;
+    --#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-top--TranslateY);
   }
 
-  &.pf-m-left-bottom,
-  &.pf-m-right-bottom {
-    .#{$tooltip}__arrow {
-      top: auto;
-      bottom: 0;
-    }
+  &:is(
+    .pf-m-left-bottom,
+    .pf-m-right-bottom
+  ) {
+    --#{$tooltip}__arrow--Top: auto;
+    --#{$tooltip}__arrow--Bottom: 0;
   }
 
-  &.pf-m-top-left,
-  &.pf-m-bottom-left {
-    .#{$tooltip}__arrow {
-      left: var(--#{$tooltip}__arrow--Width);
-    }
+  &:is(
+    .pf-m-top-left,
+    .pf-m-bottom-left
+  ) {
+    --#{$tooltip}__arrow--Left: 0;
+    --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-left--TranslateX);
   }
 
-  &.pf-m-top-right,
-  &.pf-m-bottom-right {
-    .#{$tooltip}__arrow {
-      right: 0;
-      left: auto;
-    }
+  &:is(
+    .pf-m-top-right,
+    .pf-m-bottom-right
+  ) {
+    --#{$tooltip}__arrow--Right: 0;
+    --#{$tooltip}__arrow--Left: auto;
   }
 }
 
 .#{$tooltip}__content {
   position: relative;
-  padding: var(--#{$tooltip}__content--PaddingTop) var(--#{$tooltip}__content--PaddingRight) var(--#{$tooltip}__content--PaddingBottom) var(--#{$tooltip}__content--PaddingLeft);
+  padding-block-start: var(--#{$tooltip}__content--PaddingTop);
+  padding-block-end: var(--#{$tooltip}__content--PaddingBottom);
+  padding-inline-start: var(--#{$tooltip}__content--PaddingLeft);
+  padding-inline-end: var(--#{$tooltip}__content--PaddingRight);
   font-size: var(--#{$tooltip}__content--FontSize);
   color: var(--#{$tooltip}__content--Color);
   text-align: center;
@@ -117,17 +130,24 @@
   background-color: var(--#{$tooltip}__content--BackgroundColor);
 
   &.pf-m-text-align-left {
-    text-align: left;
+    text-align: start;
   }
 }
 
 .#{$tooltip}__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--#{$tooltip}__arrow--Top, auto);
+  right: var(--#{$tooltip}__arrow--Right, auto);
+  bottom: var(--#{$tooltip}__arrow--Bottom, auto);
+  left: var(--#{$tooltip}__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--#{$tooltip}__arrow--Width);
   height: var(--#{$tooltip}__arrow--Height);
   pointer-events: none;
   background-color: var(--#{$tooltip}__arrow--BackgroundColor);
   box-shadow: var(--#{$tooltip}__arrow--BoxShadow);
+  transform: translateX(var(--#{$tooltip}__arrow--TranslateX, 0)) translateY(var(--#{$tooltip}__arrow--TranslateY, 0)) rotate(var(--#{$tooltip}__arrow--Rotate, 0));
 }
 
 // stylelint-disable no-invalid-position-at-import-rule