@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/Tooltip/tooltip.css

@@ -1,17 +1,18 @@
-.pf-v5-c-tooltip {
+:root {
   --pf-v5-c-tooltip--MaxWidth: 18.75rem;
-  --pf-v5-c-tooltip--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__content--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
+  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-tooltip__arrow--Width: 0.9375rem;
   --pf-v5-c-tooltip__arrow--Height: 0.9375rem;
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v5-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-v5-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-v5-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -24,68 +25,97 @@
   --pf-v5-c-tooltip__arrow--m-left--TranslateX: 50%;
   --pf-v5-c-tooltip__arrow--m-left--TranslateY: -50%;
   --pf-v5-c-tooltip__arrow--m-left--Rotate: 45deg;
+}
+
+.pf-v5-c-tooltip {
   position: relative;
   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;
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
+  border-radius: var(--pf-v5-c-tooltip__content--BorderRadius);
 }
 .pf-v5-c-tooltip__content.pf-m-text-align-left {
-  text-align: left;
+  text-align: start;
 }
 
 .pf-v5-c-tooltip__arrow {
   position: absolute;
+  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);
   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);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  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));
 }

package/components/Tooltip/tooltip.scss

@@ -1,24 +1,24 @@
 // @debug $tooltip; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
-.#{$tooltip} {
+:root {
   // Component variables
   --#{$tooltip}--MaxWidth: #{pf-size-prem(300px)};
-  --#{$tooltip}--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-
+  --#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);
+  
   // Content variables
-  --#{$tooltip}__content--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$tooltip}__content--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$tooltip}__content--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$tooltip}__content--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$tooltip}__content--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$tooltip}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
-  --#{$tooltip}__content--FontSize: var(--#{$pf-global}--FontSize--sm);
-
+  --#{$tooltip}__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$tooltip}__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$tooltip}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$tooltip}__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$tooltip}__content--Color: var(--pf-t--global--text--color--inverse);
+  --#{$tooltip}__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --#{$tooltip}__content--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$tooltip}__content--BorderRadius: var(--pf-t--global--border--radius--small);
+  
   // Arrow variables
   --#{$tooltip}__arrow--Width: #{pf-size-prem(15px)};
   --#{$tooltip}__arrow--Height: #{pf-size-prem(15px)};
-  --#{$tooltip}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
-  --#{$tooltip}__arrow--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
+  --#{$tooltip}__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --#{$tooltip}__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$tooltip}__arrow--m-top--TranslateX: -50%;
   --#{$tooltip}__arrow--m-top--TranslateY: 50%;
   --#{$tooltip}__arrow--m-top--Rotate: 45deg;
@@ -31,108 +31,124 @@
   --#{$tooltip}__arrow--m-left--TranslateX: 50%;
   --#{$tooltip}__arrow--m-left--TranslateY: -50%;
   --#{$tooltip}__arrow--m-left--Rotate: 45deg;
+}
 
+.#{$tooltip} {
   position: relative;
   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;
   word-break: break-word;
   background-color: var(--#{$tooltip}__content--BackgroundColor);
+  border-radius: var(--#{$tooltip}__content--BorderRadius);
 
   &.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);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/tooltip";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-tooltip;
+  transform: translateX(var(--#{$tooltip}__arrow--TranslateX, 0)) translateY(var(--#{$tooltip}__arrow--TranslateY, 0)) rotate(var(--#{$tooltip}__arrow--Rotate, 0));
 }

package/components/TreeView/tree-view.css

@@ -109,8 +109,8 @@
   --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
   --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
   --pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
-  padding-top: var(--pf-v5-c-tree-view--PaddingTop);
-  padding-bottom: var(--pf-v5-c-tree-view--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-tree-view--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view--PaddingBottom);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item {
   position: relative;
@@ -119,18 +119,18 @@
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before,
 .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
   position: absolute;
-  left: var(--pf-v5-c-tree-view--m-guides--guide--Left);
+  inset-inline-start: var(--pf-v5-c-tree-view--m-guides--guide--Left);
   content: "";
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before {
-  top: var(--pf-v5-c-tree-view--m-guides__list-item--before--Top);
+  inset-block-start: var(--pf-v5-c-tree-view--m-guides__list-item--before--Top);
   z-index: var(--pf-v5-c-tree-view--m-guides__list-item--ZIndex);
   width: var(--pf-v5-c-tree-view--m-guides__list-item--before--Width);
   height: var(--pf-v5-c-tree-view--m-guides__list-item--before--Height);
   background-color: var(--pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
-  top: var(--pf-v5-c-tree-view--m-guides__node--before--Top);
+  inset-block-start: var(--pf-v5-c-tree-view--m-guides__node--before--Top);
   width: var(--pf-v5-c-tree-view--m-guides__node--before--Width);
   height: var(--pf-v5-c-tree-view--m-guides__node--before--Height);
   background-color: var(--pf-v5-c-tree-view--m-guides__node--before--BackgroundColor);
@@ -153,7 +153,7 @@
   --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item {
-  border-bottom: var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth) solid var(--pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item.pf-m-expanded {
   --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom);
@@ -169,13 +169,13 @@
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before,
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
-  left: var(--pf-v5-c-tree-view--m-compact--border--Left);
+  inset-inline-start: var(--pf-v5-c-tree-view--m-compact--border--Left);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item::before {
-  top: var(--pf-v5-c-tree-view--m-compact__list-item--before--Top);
+  inset-block-start: var(--pf-v5-c-tree-view--m-compact__list-item--before--Top);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node::before {
-  top: var(--pf-v5-c-tree-view--m-compact__node--before--Top);
+  inset-block-start: var(--pf-v5-c-tree-view--m-compact__node--before--Top);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item:last-child::before {
   height: var(--pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height);
@@ -187,15 +187,21 @@
   --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node-container {
-  padding: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop) var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight) var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom) var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight);
   background-color: var(--pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__node-toggle {
-  margin-right: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight);
-  margin-left: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__node-container {
-  padding: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop) var(--pf-v5-c-tree-view--m-compact__node-container--PaddingRight) var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom) var(--pf-v5-c-tree-view--m-compact__node-container--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingRight);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:not([aria-expanded]) > .pf-v5-c-tree-view__content > .pf-v5-c-tree-view__node,
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item:not([aria-expanded]) > .pf-v5-c-tree-view__content > .pf-v5-c-tree-view__node > .pf-v5-c-tree-view__node-container {
@@ -223,6 +229,9 @@
   transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
   --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -238,7 +247,7 @@
   flex: 1 1;
   align-items: flex-start;
   min-width: 0;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   border: 0;
 }
@@ -246,7 +255,10 @@
 .pf-v5-c-tree-view__node {
   position: relative;
   display: flex;
-  padding: var(--pf-v5-c-tree-view__node--PaddingTop) var(--pf-v5-c-tree-view__node--PaddingRight) var(--pf-v5-c-tree-view__node--PaddingBottom) var(--pf-v5-c-tree-view__node--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tree-view__node--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view__node--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tree-view__node--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tree-view__node--PaddingRight);
   color: var(--pf-v5-c-tree-view__node--Color);
   background-color: var(--pf-v5-c-tree-view__node--BackgroundColor);
 }
@@ -258,7 +270,7 @@
   --pf-v5-c-tree-view__node--BackgroundColor: var(--pf-v5-c-tree-view__node--focus--BackgroundColor);
 }
 .pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count {
-  margin-left: var(--pf-v5-c-tree-view__node-count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-tree-view__node-count--MarginLeft);
 }
 .pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count .pf-v5-c-badge.pf-m-read {
   --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
@@ -284,28 +296,34 @@
   overflow: var(--pf-v5-c-tree-view__node-content--Overflow);
 }
 .pf-v5-c-tree-view__node-content > * + * {
-  margin-top: var(--pf-v5-c-tree-view__node-content--RowGap);
+  margin-block-start: var(--pf-v5-c-tree-view__node-content--RowGap);
 }
 
 .pf-v5-c-tree-view__node-check {
-  margin-right: var(--pf-v5-c-tree-view__node-check--MarginRight);
+  margin-inline-end: var(--pf-v5-c-tree-view__node-check--MarginRight);
 }
 
 .pf-v5-c-tree-view__node-toggle {
   position: var(--pf-v5-c-tree-view__node-toggle--Position);
-  top: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top);
-  left: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left);
+  inset-block-start: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Top);
+  inset-inline-start: var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop) var(--pf-v5-c-tree-view__node-toggle-button--PaddingRight) var(--pf-v5-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft);
-  margin-top: var(--pf-v5-c-tree-view__node-toggle-button--MarginTop);
-  margin-bottom: var(--pf-v5-c-tree-view__node-toggle-button--MarginBottom);
+  padding-block-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingRight);
+  margin-block-start: var(--pf-v5-c-tree-view__node-toggle-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-tree-view__node-toggle-button--MarginBottom);
   color: var(--pf-v5-c-tree-view__node-toggle--Color);
   background-color: var(--pf-v5-c-tree-view__node-toggle--BackgroundColor);
   border: 0;
   transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
+  transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
 
 .pf-v5-c-tree-view__node-title.pf-m-truncate,
 .pf-v5-c-tree-view__node-text.pf-m-truncate {
@@ -325,7 +343,7 @@
 .pf-v5-c-tree-view__node-text {
   font-weight: inherit;
   color: inherit;
-  text-align: left;
+  text-align: start;
   background-color: transparent;
   border: 0;
 }
@@ -338,11 +356,14 @@ label.pf-v5-c-tree-view__node-text {
 }
 
 .pf-v5-c-tree-view__search {
-  padding: var(--pf-v5-c-tree-view__search--PaddingTop) var(--pf-v5-c-tree-view__search--PaddingRight) var(--pf-v5-c-tree-view__search--PaddingBottom) var(--pf-v5-c-tree-view__search--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tree-view__search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view__search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tree-view__search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tree-view__search--PaddingRight);
 }
 
 .pf-v5-c-tree-view__node-icon {
-  padding-right: var(--pf-v5-c-tree-view__node-icon--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-tree-view__node-icon--PaddingRight);
   color: var(--pf-v5-c-tree-view__node-icon--Color);
 }
 
@@ -357,7 +378,7 @@ label.pf-v5-c-tree-view__node-text {
 }
 
 .pf-v5-c-tree-view__action {
-  margin-left: var(--pf-v5-c-tree-view__action--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-tree-view__action--MarginLeft);
 }
 
 .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {