@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.61

package/components/Tabs/tabs.css

@@ -134,8 +134,8 @@
   position: relative;
   display: flex;
   width: var(--pf-v5-c-tabs--Width);
-  padding-right: var(--pf-v5-c-tabs--inset);
-  padding-left: var(--pf-v5-c-tabs--inset);
+  padding-inline-start: var(--pf-v5-c-tabs--inset);
+  padding-inline-end: var(--pf-v5-c-tabs--inset);
   overflow: hidden;
 }
 @media screen and (min-width: 1200px) {
@@ -146,11 +146,14 @@
 }
 .pf-v5-c-tabs::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   border: solid var(--pf-v5-c-tabs--before--BorderColor);
-  border-width: var(--pf-v5-c-tabs--before--BorderTopWidth) var(--pf-v5-c-tabs--before--BorderRightWidth) var(--pf-v5-c-tabs--before--BorderBottomWidth) var(--pf-v5-c-tabs--before--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-tabs--before--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-tabs--before--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-tabs--before--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-tabs--before--BorderRightWidth);
 }
 .pf-v5-c-tabs.pf-m-fill .pf-v5-c-tabs__list {
   flex-basis: 100%;
@@ -172,11 +175,11 @@
   opacity: 1;
 }
 .pf-v5-c-tabs.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(1) {
-  margin-right: 0;
+  margin-inline-end: 0;
   transform: translateX(0);
 }
 .pf-v5-c-tabs.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(2) {
-  margin-left: 0;
+  margin-inline-start: 0;
   transform: translateX(0);
 }
 .pf-v5-c-tabs.pf-m-no-border-bottom {
@@ -206,16 +209,16 @@
   --pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--BackgroundColor);
 }
 .pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current:first-child .pf-v5-c-tabs__link::before {
-  border-left-width: var(--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
 }
 .pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current:last-child .pf-v5-c-tabs__link::before {
-  border-right-width: var(--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth);
+  border-inline-end-width: var(--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth);
 }
 .pf-v5-c-tabs.pf-m-box.pf-m-scrollable .pf-v5-c-tabs__item.pf-m-current:first-child .pf-v5-c-tabs__link::before {
-  left: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
+  inset-inline-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
 }
 .pf-v5-c-tabs.pf-m-box.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(2)::before {
-  left: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
+  inset-inline-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
 }
 .pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item {
   --pf-v5-c-tabs__link--before--Left: 0;
@@ -255,21 +258,24 @@
 }
 .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__list::before {
   position: absolute;
-  right: auto;
+  inset-inline-end: auto;
   border: solid var(--pf-v5-c-tabs--m-vertical__list--before--BorderColor);
-  border-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth) var(--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth) var(--pf-v5-c-tabs--m-vertical__list--before--BorderBottomWidth) var(--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth);
 }
 .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item:first-child {
-  margin-top: var(--pf-v5-c-tabs--inset);
+  margin-block-start: var(--pf-v5-c-tabs--inset);
 }
 .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item:last-child {
-  margin-bottom: var(--pf-v5-c-tabs--inset);
+  margin-block-end: var(--pf-v5-c-tabs--inset);
 }
 .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__link {
   --pf-v5-c-tabs__link--after--BorderTopWidth: 0;
   --pf-v5-c-tabs__link--after--BorderLeftWidth: var(--pf-v5-c-tabs__link--after--BorderWidth);
   max-width: 100%;
-  text-align: left;
+  text-align: start;
 }
 .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item-text {
   max-width: 100%;
@@ -348,8 +354,8 @@
   --pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: 0;
 }
 .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__list::before {
-  right: 0;
-  left: auto;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
 }
 .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child {
   --pf-v5-c-tabs__link--before--BorderBottomWidth: 0;
@@ -367,11 +373,11 @@
   --pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
 }
 .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__link::after {
-  top: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
+  inset-block-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
 }
 .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child .pf-v5-c-tabs__link::after,
 .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item .pf-v5-c-tabs__link::after {
-  top: 0;
+  inset-block-start: 0;
 }
 .pf-v5-c-tabs.pf-m-secondary {
   --pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-secondary__link--FontSize);
@@ -389,19 +395,19 @@
 .pf-v5-c-tabs__toggle {
   display: var(--pf-v5-c-tabs__toggle--Display);
   align-items: center;
-  margin-bottom: var(--pf-v5-c-tabs__toggle--MarginBottom);
+  margin-block-end: var(--pf-v5-c-tabs__toggle--MarginBottom);
 }
 
 .pf-v5-c-tabs__toggle-button {
   --pf-v5-c-tabs__toggle-text--MarginLeft: var(--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft);
   --pf-v5-c-tabs__toggle-text--Color: var(--pf-v5-c-tabs__toggle-button__toggle-text--Color);
-  margin-top: var(--pf-v5-c-tabs__toggle-button--MarginTop);
-  margin-bottom: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
-  margin-left: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
+  margin-block-start: var(--pf-v5-c-tabs__toggle-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
 }
 .pf-v5-c-tabs__toggle-button .pf-v5-c-button {
   display: flex;
-  text-align: left;
+  text-align: start;
   white-space: normal;
 }
 
@@ -411,9 +417,12 @@
   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-left: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
   color: var(--pf-v5-c-tabs__toggle-text--Color, inherit);
 }
 
@@ -463,9 +472,9 @@
 .pf-v5-c-tabs__scroll-button::before,
 .pf-v5-c-tabs__add::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border-style: solid;
 }
@@ -477,7 +486,7 @@
 .pf-v5-c-tabs__item.pf-m-action::after,
 .pf-v5-c-tabs__scroll-button::before,
 .pf-v5-c-tabs__add::before {
-  top: 0;
+  inset-block-start: 0;
 }
 
 .pf-v5-c-tabs__link,
@@ -491,7 +500,10 @@
   position: relative;
   display: flex;
   flex: 1;
-  padding: var(--pf-v5-c-tabs__link--PaddingTop) var(--pf-v5-c-tabs__link--PaddingRight) var(--pf-v5-c-tabs__link--PaddingBottom) var(--pf-v5-c-tabs__link--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tabs__link--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tabs__link--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tabs__link--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tabs__link--PaddingRight);
   font-size: var(--pf-v5-c-tabs__link--FontSize);
   color: var(--pf-v5-c-tabs__link--Color);
   text-decoration: none;
@@ -504,20 +516,26 @@
 
 .pf-v5-c-tabs__item.pf-m-action::before, .pf-v5-c-tabs__link::before {
   pointer-events: none;
-  border-width: var(--pf-v5-c-tabs__link--before--BorderTopWidth) var(--pf-v5-c-tabs__link--before--BorderRightWidth) var(--pf-v5-c-tabs__link--before--BorderBottomWidth) var(--pf-v5-c-tabs__link--before--BorderLeftWidth);
-  border-top-color: var(--pf-v5-c-tabs__link--before--BorderTopColor);
-  border-right-color: var(--pf-v5-c-tabs__link--before--BorderRightColor);
-  border-bottom-color: var(--pf-v5-c-tabs__link--before--BorderBottomColor);
-  border-left-color: var(--pf-v5-c-tabs__link--before--BorderLeftColor);
+  border-block-start-color: var(--pf-v5-c-tabs__link--before--BorderTopColor);
+  border-block-start-width: var(--pf-v5-c-tabs__link--before--BorderTopWidth);
+  border-block-end-color: var(--pf-v5-c-tabs__link--before--BorderBottomColor);
+  border-block-end-width: var(--pf-v5-c-tabs__link--before--BorderBottomWidth);
+  border-inline-start-color: var(--pf-v5-c-tabs__link--before--BorderLeftColor);
+  border-inline-start-width: var(--pf-v5-c-tabs__link--before--BorderLeftWidth);
+  border-inline-end-color: var(--pf-v5-c-tabs__link--before--BorderRightColor);
+  border-inline-end-width: var(--pf-v5-c-tabs__link--before--BorderRightWidth);
 }
 
 .pf-v5-c-tabs__item.pf-m-action::after, .pf-v5-c-tabs__link::after {
-  top: var(--pf-v5-c-tabs__link--after--Top);
-  right: var(--pf-v5-c-tabs__link--after--Right);
-  bottom: var(--pf-v5-c-tabs__link--after--Bottom);
-  left: var(--pf-v5-c-tabs__link--before--Left);
+  inset-block-start: var(--pf-v5-c-tabs__link--after--Top);
+  inset-block-end: var(--pf-v5-c-tabs__link--after--Bottom);
+  inset-inline-start: var(--pf-v5-c-tabs__link--before--Left);
+  inset-inline-end: var(--pf-v5-c-tabs__link--after--Right);
   border-color: var(--pf-v5-c-tabs__link--after--BorderColor);
-  border-width: var(--pf-v5-c-tabs__link--after--BorderTopWidth) var(--pf-v5-c-tabs__link--after--BorderRightWidth) var(--pf-v5-c-tabs__link--after--BorderBottomWidth) var(--pf-v5-c-tabs__link--after--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-tabs__link--after--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-tabs__link--after--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-tabs__link--after--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-tabs__link--after--BorderRightWidth);
 }
 
 .pf-v5-c-tabs__item.pf-m-action:hover, .pf-v5-c-tabs__link:hover {
@@ -558,7 +576,7 @@
 }
 .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon,
 .pf-v5-c-tabs__link .pf-v5-c-tabs__item-text {
-  margin-right: var(--pf-v5-c-tabs__link--child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-tabs__link--child--MarginRight);
 }
 .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon:last-child,
 .pf-v5-c-tabs__link .pf-v5-c-tabs__item-text:last-child {
@@ -576,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;
@@ -594,7 +615,7 @@
 
 .pf-v5-c-tabs__item-action-icon {
   display: inline-block;
-  margin-top: var(--pf-v5-c-tabs__item-action-icon--MarginTop);
+  margin-block-start: var(--pf-v5-c-tabs__item-action-icon--MarginTop);
 }
 
 .pf-v5-c-tabs__scroll-button {
@@ -607,21 +628,28 @@
   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);
 }
 .pf-v5-c-tabs__scroll-button::before {
   border-color: var(--pf-v5-c-tabs__scroll-button--before--BorderColor);
-  border-width: 0 var(--pf-v5-c-tabs__scroll-button--before--BorderRightWidth) var(--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth) var(--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth);
+  border-block-start-width: 0;
+  border-block-end-width: var(--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-tabs__scroll-button--before--BorderRightWidth);
 }
 .pf-v5-c-tabs__scroll-button:nth-of-type(1) {
   --pf-v5-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
-  margin-right: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
+  margin-inline-end: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
   transform: translateX(-100%);
 }
 .pf-v5-c-tabs__scroll-button:nth-of-type(2) {
   --pf-v5-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
-  margin-left: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
+  margin-inline-start: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
   transform: translateX(100%);
 }
 .pf-v5-c-tabs__scroll-button:disabled {
@@ -634,7 +662,7 @@
   display: flex;
 }
 .pf-v5-c-tabs__add::before {
-  border-left: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
+  border-inline-start: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
 }
 .pf-v5-c-tabs__add .pf-v5-c-button {
   --pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__add--c-button--FontSize);

package/components/Tabs/tabs.scss

@@ -176,17 +176,20 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   position: relative;
   display: flex;
   width: var(--#{$tabs}--Width);
-  padding-right: var(--#{$tabs}--inset);
-  padding-left: var(--#{$tabs}--inset);
+  padding-inline-start: var(--#{$tabs}--inset);
+  padding-inline-end: var(--#{$tabs}--inset);
   overflow: hidden; // needed for scroll button animation. limit to pf-m-scrollable in breaking change. may need new modifier so this is applied to a menu that supports scrolling, regardless of whether the scroll buttons are shown.
 
   &::before {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     border: solid var(--#{$tabs}--before--BorderColor);
-    border-width: var(--#{$tabs}--before--BorderTopWidth) var(--#{$tabs}--before--BorderRightWidth) var(--#{$tabs}--before--BorderBottomWidth) var(--#{$tabs}--before--BorderLeftWidth);
+    border-block-start-width: var(--#{$tabs}--before--BorderTopWidth);
+    border-block-end-width: var(--#{$tabs}--before--BorderBottomWidth);
+    border-inline-start-width: var(--#{$tabs}--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$tabs}--before--BorderRightWidth);
   }
 
   // Filled style
@@ -221,12 +224,12 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     // Scroll buttons
     .#{$tabs}__scroll-button:nth-of-type(1) {
-      margin-right: 0;
+      margin-inline-end: 0;
       transform: translateX(0);
     }
 
     .#{$tabs}__scroll-button:nth-of-type(2) {
-      margin-left: 0;
+      margin-inline-start: 0;
       transform: translateX(0);
     }
   }
@@ -272,22 +275,22 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     // stylelint-disable
     // Add border to first-child
     .#{$tabs}__item.pf-m-current:first-child .#{$tabs}__link::before {
-      border-left-width: var(--#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
+      border-inline-start-width: var(--#{$tabs}--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
     }
 
     // Add border to last-child
     .#{$tabs}__item.pf-m-current:last-child .#{$tabs}__link::before {
-      border-right-width: var(--#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth);
+      border-inline-end-width: var(--#{$tabs}--m-box__item--m-current--last-child__link--before--BorderRightWidth);
     }
 
     // Collapse left border into scroll button when expanded
     &.pf-m-scrollable .#{$tabs}__item.pf-m-current:first-child .#{$tabs}__link::before {
-      left: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+     inset-inline-start: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
     }
 
     // Collapse left border into list when expanded
     &.pf-m-scrollable .#{$tabs}__scroll-button:nth-of-type(2)::before {
-      left: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+     inset-inline-start: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
     }
     // stylelint-enable
 
@@ -338,19 +341,22 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
       &::before {
         position: absolute;
-        right: auto;
+        inset-inline-end: auto;
         border: solid var(--#{$tabs}--m-vertical__list--before--BorderColor);
-        border-width: var(--#{$tabs}--m-vertical__list--before--BorderTopWidth) var(--#{$tabs}--m-vertical__list--before--BorderRightWidth) var(--#{$tabs}--m-vertical__list--before--BorderBottomWidth) var(--#{$tabs}--m-vertical__list--before--BorderLeftWidth);
+        border-block-start-width: var(--#{$tabs}--m-vertical__list--before--BorderTopWidth);
+        border-block-end-width: var(--#{$tabs}--m-vertical__list--before--BorderBottomWidth);
+        border-inline-start-width: var(--#{$tabs}--m-vertical__list--before--BorderLeftWidth);
+        border-inline-end-width: var(--#{$tabs}--m-vertical__list--before--BorderRightWidth);
       }
     }
 
     // Because vertical variant has no scroll buttons, move inset to first/last __item to prevent default scrolling behavior
     .#{$tabs}__item:first-child {
-      margin-top: var(--#{$tabs}--inset);
+      margin-block-start: var(--#{$tabs}--inset);
     }
 
     .#{$tabs}__item:last-child {
-      margin-bottom: var(--#{$tabs}--inset);
+      margin-block-end: var(--#{$tabs}--inset);
     }
 
     // Set hover on left border
@@ -359,7 +365,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       --#{$tabs}__link--after--BorderLeftWidth: var(--#{$tabs}__link--after--BorderWidth);
 
       max-width: 100%;
-      text-align: left;
+      text-align: start;
     }
 
     .#{$tabs}__item-text {
@@ -403,8 +409,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     --#{$tabs}__link--disabled--before--BorderLeftWidth: 0;
 
     .#{$tabs}__list::before {
-      right: 0;
-      left: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
     }
 
     // stylelint-disable selector-max-class
@@ -432,13 +438,13 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
     // Offset vertical border to overlap horizontal border
     .#{$tabs}__link::after {
-      top: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
+     inset-block-start: calc(var(--#{$tabs}__link--before--border-width--base) * -1);
     }
 
     // Undo offset to .pf-m-current adjacent item
     .#{$tabs}__item:first-child .#{$tabs}__link::after,
     .#{$tabs}__item.pf-m-current + .#{$tabs}__item .#{$tabs}__link::after {
-      top: 0;
+     inset-block-start: 0;
     }
     // stylelint-enable
   }
@@ -465,25 +471,27 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__toggle {
   display: var(--#{$tabs}__toggle--Display);
   align-items: center;
-  margin-bottom: var(--#{$tabs}__toggle--MarginBottom);
+  margin-block-end: var(--#{$tabs}__toggle--MarginBottom);
 }
 
 .#{$tabs}__toggle-button {
   --#{$tabs}__toggle-text--MarginLeft: var(--#{$tabs}__toggle-button__toggle-text--MarginLeft);
   --#{$tabs}__toggle-text--Color: var(--#{$tabs}__toggle-button__toggle-text--Color);
 
-  margin-top: var(--#{$tabs}__toggle-button--MarginTop);
-  margin-bottom: var(--#{$tabs}__toggle-button--MarginBottom);
-  margin-left: var(--#{$tabs}__toggle-button--MarginLeft);
+  margin-block-start: var(--#{$tabs}__toggle-button--MarginTop);
+  margin-block-end: var(--#{$tabs}__toggle-button--MarginBottom);
+  margin-inline-start: var(--#{$tabs}__toggle-button--MarginLeft);
 
   .#{$button} {
     display: flex;
-    text-align: left;
+    text-align: start;
     white-space: normal;
   }
 }
 
 .#{$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);
@@ -491,7 +499,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__toggle-text {
-  margin-left: var(--#{$tabs}__toggle-text--MarginLeft);
+  margin-inline-start: var(--#{$tabs}__toggle-text--MarginLeft);
   color: var(--#{$tabs}__toggle-text--Color, inherit);
 }
 
@@ -548,9 +556,9 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__scroll-button::before,
 .#{$tabs}__add::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border-style: solid;
 }
@@ -562,7 +570,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 .#{$tabs}__item.pf-m-action::after,
 .#{$tabs}__scroll-button::before,
 .#{$tabs}__add::before {
-  top: 0;
+ inset-block-start: 0;
 }
 
 .#{$tabs}__link,
@@ -584,7 +592,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   position: relative;
   display: flex;
   flex: 1;
-  padding: var(--#{$tabs}__link--PaddingTop) var(--#{$tabs}__link--PaddingRight) var(--#{$tabs}__link--PaddingBottom) var(--#{$tabs}__link--PaddingLeft);
+  padding-block-start: var(--#{$tabs}__link--PaddingTop);
+  padding-block-end: var(--#{$tabs}__link--PaddingBottom);
+  padding-inline-start: var(--#{$tabs}__link--PaddingLeft);
+  padding-inline-end: var(--#{$tabs}__link--PaddingRight);
   font-size: var(--#{$tabs}__link--FontSize);
   color: var(--#{$tabs}__link--Color);
   text-decoration: none;
@@ -594,23 +605,29 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   & {
     &::before {
       pointer-events: none;
-      border-width: var(--#{$tabs}__link--before--BorderTopWidth) var(--#{$tabs}__link--before--BorderRightWidth) var(--#{$tabs}__link--before--BorderBottomWidth) var(--#{$tabs}__link--before--BorderLeftWidth);
-      border-top-color: var(--#{$tabs}__link--before--BorderTopColor);
-      border-right-color: var(--#{$tabs}__link--before--BorderRightColor);
-      border-bottom-color: var(--#{$tabs}__link--before--BorderBottomColor);
-      border-left-color: var(--#{$tabs}__link--before--BorderLeftColor);
+      border-block-start-color: var(--#{$tabs}__link--before--BorderTopColor);
+      border-block-start-width: var(--#{$tabs}__link--before--BorderTopWidth);
+      border-block-end-color: var(--#{$tabs}__link--before--BorderBottomColor);
+      border-block-end-width: var(--#{$tabs}__link--before--BorderBottomWidth);
+      border-inline-start-color: var(--#{$tabs}__link--before--BorderLeftColor);
+      border-inline-start-width: var(--#{$tabs}__link--before--BorderLeftWidth);
+      border-inline-end-color: var(--#{$tabs}__link--before--BorderRightColor);
+      border-inline-end-width: var(--#{$tabs}__link--before--BorderRightWidth);
     }
   }
 
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     &::after {
-      top: var(--#{$tabs}__link--after--Top);
-      right: var(--#{$tabs}__link--after--Right);
-      bottom: var(--#{$tabs}__link--after--Bottom);
-      left: var(--#{$tabs}__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
+      inset-block-start: var(--#{$tabs}__link--after--Top);
+      inset-block-end: var(--#{$tabs}__link--after--Bottom);
+      inset-inline-start: var(--#{$tabs}__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
+      inset-inline-end: var(--#{$tabs}__link--after--Right);
       border-color: var(--#{$tabs}__link--after--BorderColor);
-      border-width: var(--#{$tabs}__link--after--BorderTopWidth) var(--#{$tabs}__link--after--BorderRightWidth) var(--#{$tabs}__link--after--BorderBottomWidth) var(--#{$tabs}__link--after--BorderLeftWidth);
+      border-block-start-width: var(--#{$tabs}__link--after--BorderTopWidth);
+      border-block-end-width: var(--#{$tabs}__link--after--BorderBottomWidth);
+      border-inline-start-width: var(--#{$tabs}__link--after--BorderLeftWidth);
+      border-inline-end-width: var(--#{$tabs}__link--after--BorderRightWidth);
     }
   }
 
@@ -671,7 +688,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   // un-nest these selectors in a breaking change release
   .#{$tabs}__item-icon,
   .#{$tabs}__item-text {
-    margin-right: var(--#{$tabs}__link--child--MarginRight);
+    margin-inline-end: var(--#{$tabs}__link--child--MarginRight);
 
     &:last-child {
       --#{$tabs}__link--child--MarginRight: 0;
@@ -685,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);
@@ -712,7 +731,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
 .#{$tabs}__item-action-icon {
   display: inline-block;
-  margin-top: var(--#{$tabs}__item-action-icon--MarginTop);
+  margin-block-start: var(--#{$tabs}__item-action-icon--MarginTop);
 }
 
 // Scroll buttons
@@ -726,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 {
@@ -734,20 +757,23 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 
   &::before {
     border-color: var(--#{$tabs}__scroll-button--before--BorderColor);
-    border-width: 0 var(--#{$tabs}__scroll-button--before--BorderRightWidth) var(--#{$tabs}__scroll-button--before--BorderBottomWidth) var(--#{$tabs}__scroll-button--before--BorderLeftWidth);
+    border-block-start-width: 0;
+    border-block-end-width: var(--#{$tabs}__scroll-button--before--BorderBottomWidth);
+    border-inline-start-width: var(--#{$tabs}__scroll-button--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$tabs}__scroll-button--before--BorderRightWidth);
   }
 
   &:nth-of-type(1) {
     --#{$tabs}__scroll-button--before--BorderRightWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
 
-    margin-right: calc(var(--#{$tabs}__scroll-button--Width) * -1);
+    margin-inline-end: calc(var(--#{$tabs}__scroll-button--Width) * -1);
     transform: translateX(-100%);
   }
 
   &:nth-of-type(2) {
     --#{$tabs}__scroll-button--before--BorderLeftWidth: var(--#{$tabs}__scroll-button--before--border-width--base);
 
-    margin-left: calc(var(--#{$tabs}__scroll-button--Width) * -1);
+    margin-inline-start: calc(var(--#{$tabs}__scroll-button--Width) * -1);
     transform: translateX(100%);
   }
 
@@ -763,7 +789,7 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   display: flex;
 
   &::before {
-    border-left: var(--#{$tabs}__add--before--BorderLeftWidth) solid var(--#{$tabs}__add--before--BorderColor);
+    border-inline-start: var(--#{$tabs}__add--before--BorderLeftWidth) solid var(--#{$tabs}__add--before--BorderColor);
   }
 
   .#{$button} {