@patternfly/patternfly 5.0.2 → 5.1.0-prerelease.10

package/components/Table/table.scss

@@ -332,7 +332,7 @@
     position: relative;
 
     thead:where(.#{$table}__thead) tr:where(.#{$table}__tr) {
-      border-bottom: 0;
+      border-block-end: 0;
 
       > * {
         z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
@@ -343,17 +343,17 @@
     > thead:where(.#{$table}__thead):not(.pf-m-nested-column-header) {
       > tr:where(.#{$table}__tr) > * {
         position: sticky;
-        top: 0;
+       inset-block-start: 0;
         background: var(--#{$table}--BackgroundColor);
 
         // stylelint-disable-next-line
         &::after {
           position: absolute;
-          right: 0;
-          bottom: 0;
-          left: 0;
+          inset-block-end: 0;
+          inset-inline-start: 0;
+          inset-inline-end: 0;
           content: "";
-          border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+          border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
         }
       }
     }
@@ -361,7 +361,7 @@
     // nested column header
     > .pf-m-nested-column-header {
       position: sticky;
-      top: 0;
+     inset-block-start: 0;
       z-index: var(--#{$pf-global}--ZIndex--xs);
       background: var(--#{$table}--BackgroundColor);
 
@@ -385,7 +385,7 @@
 
   &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
     tr:where(.#{$table}__tr):not(:last-child) {
-      border-bottom: 0; // hard reset tr borders in nested headers
+      border-block-end: 0; // hard reset tr borders in nested headers
 
       // stylelint-disable max-nesting-depth
       th:where(.#{$table}__th),
@@ -414,7 +414,7 @@
   // Standard table row (non-expandable)
   // exclude expandable rows
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
-    border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
 
     // stylelint-disable-next-line
     &.pf-m-ghost-row {
@@ -432,7 +432,10 @@
     width: var(--#{$table}--cell--Width);
     min-width: var(--#{$table}--cell--MinWidth);
     max-width: var(--#{$table}--cell--MaxWidth);
-    padding: var(--#{$table}--cell--PaddingTop) var(--#{$table}--cell--PaddingRight) var(--#{$table}--cell--PaddingBottom) var(--#{$table}--cell--PaddingLeft);
+    padding-block-start: var(--#{$table}--cell--PaddingTop);
+    padding-block-end: var(--#{$table}--cell--PaddingBottom);
+    padding-inline-start: var(--#{$table}--cell--PaddingLeft);
+    padding-inline-end: var(--#{$table}--cell--PaddingRight);
 
     // default settings
     overflow: var(--#{$table}--cell--Overflow);
@@ -477,31 +480,31 @@
     &.pf-m-border-right::before,
     &.pf-m-border-left::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       pointer-events: none;
       content: "";
     }
 
     &.pf-m-border-right::before {
-      border-right: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
+      border-inline-end: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
     }
 
     &.pf-m-border-left::before {
-      border-left: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
+      border-inline-start: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
     }
   }
 
   // Table caption
   caption:where(.#{$table}__caption) {
-    padding-top: var(--#{$table}__caption--PaddingTop);
-    padding-bottom: var(--#{$table}__caption--PaddingBottom);
-    padding-left: var(--#{$table}__caption--PaddingLeft);
+    padding-block-start: var(--#{$table}__caption--PaddingTop);
+    padding-block-end: var(--#{$table}__caption--PaddingBottom);
+    padding-inline-start: var(--#{$table}__caption--PaddingLeft);
     font-size: var(--#{$table}__caption--FontSize);
     color: var(--#{$table}__caption--Color);
-    text-align: left;
+    text-align: start;
     background-color: var(--#{$table}--BackgroundColor);
   }
 
@@ -564,26 +567,26 @@
       position: absolute;
 
       // offset top to extend above tr border
-      top: var(--#{$table}__expandable-row--after--Top);
-      bottom: var(--#{$table}__expandable-row--after--Bottom);
-      left: 0;
+     inset-block-start: var(--#{$table}__expandable-row--after--Top);
+     inset-block-end: var(--#{$table}__expandable-row--after--Bottom);
+     inset-inline-start: 0;
       content: "";
 
       // add border left
       background-color: transparent;
-      border-left: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
+      border-inline-start: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
     }
 
     // Check table cell
     .#{$table}__check {
       input:where(.#{$check}__input) {
-        margin-top: var(--#{$table}__check--input--MarginTop);
+        margin-block-start: var(--#{$table}__check--input--MarginTop);
         vertical-align: top;
       }
     }
 
     &.pf-m-expanded > :first-child:not(.#{$table}__control-row) {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
   }
   // stylelint-enable
@@ -658,10 +661,10 @@
   // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
   &.pf-m-no-border-rows > tbody:where(.#{$table}__tbody) {
     > tr:where(.#{$table}__tr) {
-      border-bottom: 0;
+      border-block-end: 0;
 
       > :first-child::after {
-        border-left: 0;
+        border-inline-start: 0;
       }
     }
 
@@ -670,11 +673,11 @@
     }
 
     &.pf-m-expanded > .#{$table}__control-row {
-      border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
     }
 
     .#{$table}__control-row > .#{$table}__compound-expansion-toggle:first-child > ::before {
-      border-left-width: 0;
+      border-inline-start-width: 0;
     }
   }
 
@@ -839,11 +842,14 @@
 .#{$table}__button {
   position: static;
   width: 100%;
-  padding: var(--#{$table}--cell--PaddingTop) var(--#{$table}--cell--PaddingRight) var(--#{$table}--cell--PaddingBottom) var(--#{$table}--cell--PaddingLeft);
+  padding-block-start: var(--#{$table}--cell--PaddingTop);
+  padding-block-end: var(--#{$table}--cell--PaddingBottom);
+  padding-inline-start: var(--#{$table}--cell--PaddingLeft);
+  padding-inline-end: var(--#{$table}--cell--PaddingRight);
   font-size: inherit;
   font-weight: inherit;
   color: var(--#{$table}__button--Color);
-  text-align: left;
+  text-align: start;
   white-space: inherit;
   user-select: text;
   background-color: var(--#{$table}__button--BackgroundColor);
@@ -852,10 +858,10 @@
   // Define clickable area with invisible ::before pseudo
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     cursor: pointer;
     content: "";
   }
@@ -954,8 +960,8 @@
   vertical-align: top;
 
   .#{$button} {
-    margin-top: var(--#{$table}__toggle--c-button--MarginTop);
-    margin-bottom: var(--#{$table}__toggle--c-button--MarginBottom);
+    margin-block-start: var(--#{$table}__toggle--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__toggle--c-button--MarginBottom);
 
     &.pf-m-expanded {
       .#{$table}__toggle-icon {
@@ -986,7 +992,10 @@
   label {
     display: block;
     padding: inherit;
-    margin: calc(var(--#{$table}--cell--PaddingTop) * -1) calc(var(--#{$table}--cell--PaddingRight) * -1) calc(var(--#{$table}--cell--PaddingBottom) * -1) calc(var(--#{$table}--cell--PaddingLeft) * -1);
+    margin-block-start: calc(var(--#{$table}--cell--PaddingTop) * -1);
+    margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
+    margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
+    margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
   }
 }
 
@@ -996,7 +1005,10 @@
     --#{$button}--m-plain--Color: var(--#{$table}__favorite--c-button--Color);
     --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
 
-    margin: var(--#{$table}__favorite--c-button--MarginTop) var(--#{$table}__favorite--c-button--MarginRight) var(--#{$table}__favorite--c-button--MarginBottom) var(--#{$table}__favorite--c-button--MarginLeft);
+    margin-block-start: var(--#{$table}__favorite--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__favorite--c-button--MarginBottom);
+    margin-inline-start: var(--#{$table}__favorite--c-button--MarginLeft);
+    margin-inline-end: var(--#{$table}__favorite--c-button--MarginRight);
 
     @at-root .pf-m-favorited#{&} {
       --#{$button}--m-plain--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
@@ -1007,7 +1019,10 @@
 // Draggable
 .#{$table}__draggable {
   .#{$button} {
-    margin: var(--#{$table}__draggable--c-button--MarginTop) var(--#{$table}__draggable--c-button--MarginRight) var(--#{$table}__draggable--c-button--MarginBottom) var(--#{$table}__draggable--c-button--MarginLeft);
+    margin-block-start: var(--#{$table}__draggable--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__draggable--c-button--MarginBottom);
+    margin-inline-start: var(--#{$table}__draggable--c-button--MarginLeft);
+    margin-inline-end: var(--#{$table}__draggable--c-button--MarginRight);
     cursor: grab;
 
     &:active {
@@ -1024,13 +1039,13 @@
   --#{$table}--cell--PaddingBottom: 0;
   --#{$table}--cell--PaddingLeft: var(--#{$table}__action--PaddingLeft);
 
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
   vertical-align: middle;
 }
 
 .#{$table}__action {
-  text-align: right;
+  text-align: end;
 }
 
 // Inline edit
@@ -1038,7 +1053,7 @@
   --#{$table}--cell--PaddingLeft: 0;
   --#{$table}--cell--PaddingRight: 0;
 
-  text-align: right;
+  text-align: end;
 }
 
 // Compound expansion toggle
@@ -1071,28 +1086,28 @@
   .#{$table}__button::before,
   .#{$table}__button::after {
     position: absolute;
-    right: 0;
+   inset-inline-end: 0;
     content: "";
     border-style: solid;
     border-width: 0;
   }
 
   .#{$table}__button::before {
-    top: 0;
-    bottom: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
-    left: var(--#{$table}__compound-expansion-toggle__button--before--Left);
+   inset-block-start: 0;
+   inset-block-end: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
+   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--before--Left);
     border-color: var(--#{$table}__compound-expansion-toggle__button--before--BorderColor);
-    border-right-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
-    border-left-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
+    border-inline-start-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
   }
 
   .#{$table}__button::after {
     // overlap previous row's border
-    top: var(--#{$table}__compound-expansion-toggle__button--after--Top);
-    left: var(--#{$table}__compound-expansion-toggle__button--after--Left);
+   inset-block-start: var(--#{$table}__compound-expansion-toggle__button--after--Top);
+   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--after--Left);
     pointer-events: none;
     border-color: var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
-    border-top-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);
+    border-block-start-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);
   }
 
   &:hover,
@@ -1110,7 +1125,7 @@
 
   &.pf-m-expanded {
     .#{$table}__button::before {
-      border-bottom: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
+      border-block-end: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
     }
 
     &:first-child {
@@ -1131,15 +1146,15 @@
 }
 
 .#{$table}__column-help-action {
-  margin-left: var(--#{$table}__column-help--MarginLeft);
+  margin-inline-start: var(--#{$table}__column-help--MarginLeft);
   transform: translateY(var(--#{$table}__column-help--TranslateY));
 
   .#{$button} {
     --#{$button}--PaddingRight: var(--#{$table}__column-help--c-button--PaddingRight);
     --#{$button}--PaddingLeft: var(--#{$table}__column-help--c-button--PaddingLeft);
 
-    margin-top: var(--#{$table}__column-help--c-button--MarginTop);
-    margin-bottom: var(--#{$table}__column-help--c-button--MarginBottom);
+    margin-block-start: var(--#{$table}__column-help--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__column-help--c-button--MarginBottom);
     font-size: inherit;
     line-height: 1;
   }
@@ -1156,9 +1171,9 @@
 
     display: flex;
     width: auto;
-    margin-top: var(--#{$table}__sort__button--MarginTop);
-    margin-bottom: var(--#{$table}__sort__button--MarginBottom);
-    margin-left: var(--#{$table}__sort__button--MarginLeft);
+    margin-block-start: var(--#{$table}__sort__button--MarginTop);
+    margin-block-end: var(--#{$table}__sort__button--MarginBottom);
+    margin-inline-start: var(--#{$table}__sort__button--MarginLeft);
 
     &:hover {
       --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--hover__sort-indicator--Color);
@@ -1204,7 +1219,7 @@
 // Sort indicator
 .#{$table}__sort-indicator {
   grid-column: 2;
-  margin-left: var(--#{$table}__sort-indicator--MarginLeft);
+  margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft);
   color: var(--#{$table}__sort-indicator--Color);
   pointer-events: none;
 }
@@ -1216,7 +1231,7 @@
   --#{$table}--cell--PaddingBottom: 0;
 
   position: relative;
-  border-bottom: 0 solid transparent;
+  border-block-end: 0 solid transparent;
   box-shadow: 0 0 0 0 transparent;
 
   &,
@@ -1228,7 +1243,10 @@
   td:where(.#{$table}__td),
   th:where(.#{$table}__th) {
     &.pf-m-no-padding {
-      padding: 0 0 0 var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
+      padding-block-start: 0;
+      padding-inline-end: 0;
+      padding-block-end: 0;
+      padding-inline-start: var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
 
       .#{$table}__expandable-row-content {
         padding: 0;
@@ -1238,14 +1256,14 @@
   // stylelint-enable
 
   .#{$table}__expandable-row-content {
-    padding-top: var(--#{$table}__expandable-row-content--PaddingTop);
-    padding-bottom: var(--#{$table}__expandable-row-content--PaddingBottom);
+    padding-block-start: var(--#{$table}__expandable-row-content--PaddingTop);
+    padding-block-end: var(--#{$table}__expandable-row-content--PaddingBottom);
   }
 
   // Modifier - Expanded tr
   &.pf-m-expanded {
-    border-bottom-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
-    border-bottom-width: var(--#{$table}--border-width--base);
+    border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
+    border-block-end-width: var(--#{$table}--border-width--base);
     box-shadow: var(--#{$table}__expandable-row--m-expanded--BoxShadow);
   }
 
@@ -1352,7 +1370,7 @@
   align-items: center;
 
   > :not(:last-child) {
-    margin-right: var(--#{$table}__icon-inline--MarginRight);
+    margin-inline-end: var(--#{$table}__icon-inline--MarginRight);
   }
 }
 

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;
 }
 
@@ -413,7 +419,7 @@
 }
 
 .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 +469,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 +483,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 +497,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 +513,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 +573,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 {
@@ -594,7 +609,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 {
@@ -612,16 +627,19 @@
 }
 .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 +652,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);