@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0

package/components/Tabs/tabs.css

@@ -417,6 +417,9 @@
   transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tabs__toggle-text {
   margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -591,6 +594,9 @@
   transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tabs__item-action {
   display: flex;
@@ -622,6 +628,10 @@
   opacity: 0;
   transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
   --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
 }

package/components/Tabs/tabs.scss

@@ -490,6 +490,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   color: var(--#{$tabs}__toggle-icon--Color);
   transition: var(--#{$tabs}__toggle-icon--Transition);
@@ -700,6 +702,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__link-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   align-self: end;
   font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
   color: var(--#{$tabs}__link-toggle-icon--Color);
@@ -741,6 +745,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   opacity: 0;
   transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
 
+  > * {
+    @include pf-v5-mirror-inline-on-rtl; // in breaking change, add an icon wrapper and move this style to the wrapper
+  }
+
   &:hover,
   &:active,
   &:focus {

package/components/Toolbar/toolbar.scss

@@ -409,6 +409,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,

package/components/Tooltip/tooltip.css

@@ -28,39 +28,61 @@
   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 {
-  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-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 {
-  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));
+.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 {
-  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));
+.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 {
-  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));
+.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 {
-  inset-block-start: 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 {
-  inset-block-start: auto;
-  inset-block-end: 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 {
-  inset-inline-start: 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 {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+.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 {
@@ -81,11 +103,18 @@
 
 .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,74 +36,84 @@
   max-width: var(--#{$tooltip}--MaxWidth);
   box-shadow: var(--#{$tooltip}--BoxShadow);
 
-  &.pf-m-top,
-  &.pf-m-top-left,
-  &.pf-m-top-right {
-    .#{$tooltip}__arrow {
-      inset-block-end: 0;
-      inset-inline-start: 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 {
-      inset-block-start: 0;
-      inset-inline-start: 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 {
-      inset-block-start: 50%;
-      inset-inline-end: 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 {
-      inset-block-start: 50%;
-      inset-inline-start: 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 {
-      inset-block-start: 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 {
-      inset-block-start: auto;
-      inset-block-end: 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 {
-      inset-inline-start: 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 {
-      inset-inline-start: auto;
-      inset-inline-end: 0;
-    }
+  &:is(
+    .pf-m-top-right,
+    .pf-m-bottom-right
+  ) {
+    --#{$tooltip}__arrow--Right: 0;
+    --#{$tooltip}__arrow--Left: auto;
   }
 }
 
@@ -126,11 +136,18 @@
 
 .#{$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

package/components/TreeView/tree-view.css

@@ -229,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);
@@ -318,6 +321,9 @@
   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 {

package/components/TreeView/tree-view.scss

@@ -332,6 +332,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__node-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
   text-align: center;
@@ -429,8 +431,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
 .#{$tree-view}__node-toggle {
   position: var(--#{$tree-view}__node-toggle--Position);
- inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
- inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
+  inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
+  inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -443,7 +445,12 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   color: var(--#{$tree-view}__node-toggle--Color);
   background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
   border: 0;
-  transform: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX));
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
+  );
 }
 
 .#{$tree-view}__node-title,

package/components/Truncate/truncate.css

@@ -21,14 +21,23 @@
 .pf-v5-c-truncate__end {
   direction: rtl;
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+  direction: ltr;
+}
 
 .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
   overflow: visible;
   direction: ltr;
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
+  direction: rtl;
+}
 
 @supports (-webkit-hyphens: none) {
   .pf-v5-c-truncate__end {
     direction: ltr;
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+    direction: rtl;
+  }
 }

package/components/Truncate/truncate.scss

@@ -23,17 +23,30 @@
 
 // End
 .#{$truncate}__end {
-  direction: rtl;
+  @include pf-v5-bidirectional-style (
+    $prop: direction,
+    $ltr-val: rtl,
+    $rtl-val: ltr
+  )
 }
 
 .#{$truncate}__start + .#{$truncate}__end {
   overflow: visible;
-  direction: ltr;
+
+  @include pf-v5-bidirectional-style (
+    $prop: direction,
+    $ltr-val: ltr,
+    $rtl-val: rtl
+  )
 }
 
 // safari not supported
 @supports (-webkit-hyphens: none) {
   .#{$truncate}__end {
-    direction: ltr;
+    @include pf-v5-bidirectional-style (
+      $prop: direction,
+      $ltr-val: ltr,
+      $rtl-val: rtl
+    )
   }
 }

package/components/Wizard/wizard.css

@@ -303,6 +303,9 @@
   margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
   color: var(--pf-v5-c-wizard__toggle-separator--Color);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__toggle-icon {
   line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -407,6 +410,7 @@
   border: 0;
 }
 .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
+  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
   position: absolute;
   inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
   inset-inline-start: 0;
@@ -420,7 +424,9 @@
   color: var(--pf-v5-c-wizard__nav-link--before--Color);
   background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
   border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
-  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
+  transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-wizard__nav-link::before {
@@ -469,6 +475,9 @@
   transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__main {
   z-index: var(--pf-v5-c-wizard__main--ZIndex);

package/components/Wizard/wizard.scss

@@ -335,6 +335,8 @@
 }
 
 .#{$wizard}__toggle-separator {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-start: var(--#{$wizard}__toggle-separator--MarginLeft);
   color: var(--#{$wizard}__toggle-separator--Color);
 }
@@ -459,9 +461,15 @@
   // Common step number styles
   @at-root .#{$wizard}__toggle-num,
   &::before {
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))})
+    );
+
     position: absolute;
-   inset-block-start: var(--#{$wizard}__nav-link--before--Top);
-   inset-inline-start: 0;
+    inset-block-start: var(--#{$wizard}__nav-link--before--Top);
+    inset-inline-start: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -472,7 +480,6 @@
     color: var(--#{$wizard}__nav-link--before--Color);
     background-color: var(--#{$wizard}__nav-link--before--BackgroundColor);
     border-radius: var(--#{$wizard}__nav-link--before--BorderRadius);
-    transform: translateX(var(--#{$wizard}__nav-link--before--TranslateX));
   }
 
   // Nav step number
@@ -528,6 +535,8 @@
 }
 
 .#{$wizard}__nav-link-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);
   transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));

package/docs/components/Button/examples/Button.md

@@ -50,10 +50,20 @@ cssPrefix: pf-v5-c-button
 <button class="pf-v5-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
 <br />
 <br />
+<span>Default plain button:</span>
 <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Remove">
   <i class="fas fa-times" aria-hidden="true"></i>
 </button>
 <br />
+<span>No padding plain button:</span>
+<button
+  class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+  type="button"
+  aria-label="Remove"
+>
+  <i class="fas fa-times" aria-hidden="true"></i>
+</button>
+<br />
 <br />
 <button class="pf-v5-c-button pf-m-control" type="button">Control</button>
 
@@ -65,10 +75,11 @@ cssPrefix: pf-v5-c-button
   <i class="fas fa-copy" aria-hidden="true"></i>
 </button>
 
-<br />
-<br />
-<br />
+```
+
+### Small buttons
 
+```html
 <button class="pf-v5-c-button pf-m-primary pf-m-small" type="button">Primary</button>
 
 <button class="pf-v5-c-button pf-m-secondary pf-m-small" type="button">Secondary</button>
@@ -533,6 +544,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-warning` | `.pf-v5-c-button` | Modifies for warning styles. |
 | `.pf-m-link` | `.pf-v5-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
 | `.pf-m-plain` | `.pf-v5-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
+| `.pf-m-no-padding` | `.pf-v5-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
 | `.pf-m-inline` | `.pf-v5-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
 | `.pf-m-block` | `.pf-v5-c-button` | Creates a block level button. |
 | `.pf-m-control` | `.pf-v5-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |

package/docs/components/Card/examples/Card.md

@@ -510,7 +510,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Single Selectable
+### Single selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -748,7 +748,7 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Clickable and Selectable
+### Clickable and selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">

package/docs/components/Chip/examples/Chip.md

@@ -828,7 +828,7 @@ The chip group requires the [chip component](#chip-overview). **All single chip
 
 | Attributes for closable chip group button | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"` | `.pf-v5-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |