@patternfly/patternfly 5.0.2 → 5.1.0-prerelease.10

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,20 +471,20 @@ $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;
   }
 }
@@ -491,7 +497,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 +554,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 +568,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 +590,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 +603,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 +686,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;
@@ -712,7 +727,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
@@ -734,20 +749,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 +781,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} {

package/components/TextInputGroup/text-input-group.css

@@ -67,12 +67,12 @@
   --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft);
 }
 .pf-v5-c-text-input-group__main > :first-child:not(.pf-v5-c-text-input-group__text) {
-  margin-left: var(--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft);
 }
 .pf-v5-c-text-input-group__main .pf-v5-c-chip-group__main {
-  padding-top: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop);
-  padding-right: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight);
-  padding-bottom: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop);
+  padding-block-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom);
+  padding-inline-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight);
 }
 
 .pf-v5-c-text-input-group__text {
@@ -83,10 +83,7 @@
 }
 .pf-v5-c-text-input-group__text::before, .pf-v5-c-text-input-group__text::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
 }
@@ -94,7 +91,7 @@
   border: var(--pf-v5-c-text-input-group__text--before--BorderWidth) solid var(--pf-v5-c-text-input-group__text--before--BorderColor);
 }
 .pf-v5-c-text-input-group__text::after {
-  border-bottom: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
 }
 .pf-v5-c-text-input-group__text:focus-within {
   --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth);
@@ -103,8 +100,8 @@
 
 .pf-v5-c-text-input-group__icon {
   position: absolute;
-  top: 50%;
-  left: var(--pf-v5-c-text-input-group__icon--Left);
+  inset-block-start: 50%;
+  inset-inline-start: var(--pf-v5-c-text-input-group__icon--Left);
   color: var(--pf-v5-c-text-input-group__icon--Color);
   transform: translateY(var(--pf-v5-c-text-input-group__icon--TranslateY));
 }
@@ -116,7 +113,10 @@
   position: relative;
   width: 100%;
   min-width: var(--pf-v5-c-text-input-group__text-input--MinWidth);
-  padding: var(--pf-v5-c-text-input-group__text-input--PaddingTop) var(--pf-v5-c-text-input-group__text-input--PaddingRight) var(--pf-v5-c-text-input-group__text-input--PaddingBottom) var(--pf-v5-c-text-input-group__text-input--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-text-input-group__text-input--PaddingTop);
+  padding-block-end: var(--pf-v5-c-text-input-group__text-input--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-text-input-group__text-input--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-text-input-group__text-input--PaddingRight);
   background-color: var(--pf-v5-c-text-input-group__text-input--BackgroundColor);
   border: 0;
 }
@@ -133,11 +133,11 @@
 .pf-v5-c-text-input-group__utilities {
   display: flex;
   align-items: center;
-  margin-right: var(--pf-v5-c-text-input-group__utilities--MarginRight);
-  margin-left: var(--pf-v5-c-text-input-group__utilities--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-text-input-group__utilities--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-text-input-group__utilities--MarginRight);
 }
 .pf-v5-c-text-input-group__utilities > * + * {
-  margin-left: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
 }
 .pf-v5-c-text-input-group__utilities .pf-v5-c-button {
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingRight);

package/components/TextInputGroup/text-input-group.scss

@@ -95,13 +95,13 @@
   }
 
   > :first-child:not(.#{$text-input-group}__text) {
-    margin-left: var(--#{$text-input-group}__main--first-child--not--text-input--MarginLeft);
+    margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginLeft);
   }
 
   .#{$chip-group}__main {
-    padding-top: var(--#{$text-input-group}--c-chip-group__main--PaddingTop);
-    padding-right: var(--#{$text-input-group}--c-chip-group__main--PaddingRight);
-    padding-bottom: var(--#{$text-input-group}--c-chip-group__main--PaddingBottom);
+    padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingTop);
+    padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBottom);
+    padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingRight);
   }
 }
 
@@ -114,10 +114,7 @@
   &::before,
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
   }
@@ -127,7 +124,7 @@
   }
 
   &::after {
-    border-bottom: var(--#{$text-input-group}__text--after--BorderBottomWidth) solid var(--#{$text-input-group}__text--after--BorderBottomColor);
+    border-block-end: var(--#{$text-input-group}__text--after--BorderBottomWidth) solid var(--#{$text-input-group}__text--after--BorderBottomColor);
   }
 
   &:focus-within {
@@ -138,8 +135,8 @@
 
 .#{$text-input-group}__icon {
   position: absolute;
-  top: 50%;
-  left: var(--#{$text-input-group}__icon--Left);
+ inset-block-start: 50%;
+ inset-inline-start: var(--#{$text-input-group}__icon--Left);
   color: var(--#{$text-input-group}__icon--Color);
   transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
 }
@@ -150,7 +147,10 @@
   position: relative;
   width: 100%;
   min-width: var(--#{$text-input-group}__text-input--MinWidth);
-  padding: var(--#{$text-input-group}__text-input--PaddingTop) var(--#{$text-input-group}__text-input--PaddingRight) var(--#{$text-input-group}__text-input--PaddingBottom) var(--#{$text-input-group}__text-input--PaddingLeft);
+  padding-block-start: var(--#{$text-input-group}__text-input--PaddingTop);
+  padding-block-end: var(--#{$text-input-group}__text-input--PaddingBottom);
+  padding-inline-start: var(--#{$text-input-group}__text-input--PaddingLeft);
+  padding-inline-end: var(--#{$text-input-group}__text-input--PaddingRight);
   background-color: var(--#{$text-input-group}__text-input--BackgroundColor);
   border: 0;
 
@@ -171,11 +171,11 @@
 .#{$text-input-group}__utilities {
   display: flex;
   align-items: center;
-  margin-right: var(--#{$text-input-group}__utilities--MarginRight);
-  margin-left: var(--#{$text-input-group}__utilities--MarginLeft);
+  margin-inline-start: var(--#{$text-input-group}__utilities--MarginLeft);
+  margin-inline-end: var(--#{$text-input-group}__utilities--MarginRight);
 
   > * + * {
-    margin-left: var(--#{$text-input-group}__utilities--child--MarginLeft);
+    margin-inline-start: var(--#{$text-input-group}__utilities--child--MarginLeft);
   }
 
   .#{$button} {

package/components/Tile/tile.css

@@ -43,7 +43,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding: var(--pf-v5-c-tile--PaddingTop) var(--pf-v5-c-tile--PaddingRight) var(--pf-v5-c-tile--PaddingBottom) var(--pf-v5-c-tile--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tile--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tile--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tile--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tile--PaddingRight);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-v5-c-tile--BackgroundColor);
@@ -56,16 +59,13 @@
   content: "";
 }
 .pf-v5-c-tile::before {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   border: var(--pf-v5-c-tile--before--BorderWidth) solid var(--pf-v5-c-tile--before--BorderColor);
 }
 .pf-v5-c-tile::after {
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   height: var(--pf-v5-c-tile--after--Height);
   background-color: var(--pf-v5-c-tile--after--BackgroundColor);
   transition: var(--pf-v5-c-tile--after--Transition);
@@ -118,7 +118,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--pf-v5-c-tile__header--m-stacked__icon--MarginBottom);
+  margin-block-end: var(--pf-v5-c-tile__header--m-stacked__icon--MarginBottom);
 }
 
 .pf-v5-c-tile__title {
@@ -131,7 +131,7 @@
 }
 
 .pf-v5-c-tile__icon {
-  margin-right: var(--pf-v5-c-tile__icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-tile__icon--MarginRight);
   font-size: var(--pf-v5-c-tile__icon--FontSize);
   color: var(--pf-v5-c-tile__icon--Color);
 }

package/components/Tile/tile.scss

@@ -66,7 +66,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding: var(--#{$tile}--PaddingTop) var(--#{$tile}--PaddingRight) var(--#{$tile}--PaddingBottom) var(--#{$tile}--PaddingLeft);
+  padding-block-start: var(--#{$tile}--PaddingTop);
+  padding-block-end: var(--#{$tile}--PaddingBottom);
+  padding-inline-start: var(--#{$tile}--PaddingLeft);
+  padding-inline-end: var(--#{$tile}--PaddingRight);
   text-align: center;
   cursor: pointer;
   background-color: var(--#{$tile}--BackgroundColor);
@@ -81,17 +84,14 @@
   }
 
   &::before {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     border: var(--#{$tile}--before--BorderWidth) solid var(--#{$tile}--before--BorderColor);
   }
 
   &::after {
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     height: var(--#{$tile}--after--Height);
     background-color: var(--#{$tile}--after--BackgroundColor);
     transition: var(--#{$tile}--after--Transition);
@@ -155,7 +155,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-bottom: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
+      margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
     }
   }
 }
@@ -170,7 +170,7 @@
 }
 
 .#{$tile}__icon {
-  margin-right: var(--#{$tile}__icon--MarginRight);
+  margin-inline-end: var(--#{$tile}__icon--MarginRight);
   font-size: var(--#{$tile}__icon--FontSize);
   color: var(--#{$tile}__icon--Color);
 }

package/components/ToggleGroup/toggle-group.css

@@ -44,22 +44,25 @@
 }
 
 .pf-v5-c-toggle-group__item + .pf-v5-c-toggle-group__item {
-  margin-left: var(--pf-v5-c-toggle-group__item--item--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-toggle-group__item--item--MarginLeft);
 }
 .pf-v5-c-toggle-group__item:first-child .pf-v5-c-toggle-group__button, .pf-v5-c-toggle-group__item:first-child .pf-v5-c-toggle-group__button::before {
-  border-top-left-radius: var(--pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
-  border-bottom-left-radius: var(--pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
+  border-start-start-radius: var(--pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
+  border-end-start-radius: var(--pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
 }
 .pf-v5-c-toggle-group__item:last-child .pf-v5-c-toggle-group__button, .pf-v5-c-toggle-group__item:last-child .pf-v5-c-toggle-group__button::before {
-  border-top-right-radius: var(--pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius);
-  border-bottom-right-radius: var(--pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
+  border-start-end-radius: var(--pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius);
+  border-end-end-radius: var(--pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
 }
 
 .pf-v5-c-toggle-group__button {
   position: relative;
   z-index: var(--pf-v5-c-toggle-group__button--ZIndex);
   display: inline-flex;
-  padding: var(--pf-v5-c-toggle-group__button--PaddingTop) var(--pf-v5-c-toggle-group__button--PaddingRight) var(--pf-v5-c-toggle-group__button--PaddingBottom) var(--pf-v5-c-toggle-group__button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-toggle-group__button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-toggle-group__button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-toggle-group__button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-toggle-group__button--PaddingRight);
   font-size: var(--pf-v5-c-toggle-group__button--FontSize);
   line-height: var(--pf-v5-c-toggle-group__button--LineHeight);
   color: var(--pf-v5-c-toggle-group__button--Color);
@@ -68,10 +71,10 @@
 }
 .pf-v5-c-toggle-group__button::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: "";
   border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
@@ -101,7 +104,7 @@
 
 .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
 .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
-  margin-left: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {

package/components/ToggleGroup/toggle-group.scss

@@ -58,15 +58,15 @@
 
 .#{$toggle-group}__item {
   & + & {
-    margin-left: var(--#{$toggle-group}__item--item--MarginLeft);
+    margin-inline-start: var(--#{$toggle-group}__item--item--MarginLeft);
   }
 
   &:first-child {
     .#{$toggle-group}__button {
       &,
       &::before {
-        border-top-left-radius: var(--#{$toggle-group}__item--first-child__button--BorderTopLeftRadius);
-        border-bottom-left-radius: var(--#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius);
+        border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderTopLeftRadius);
+        border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius);
       }
     }
   }
@@ -75,8 +75,8 @@
     .#{$toggle-group}__button {
       &,
       &::before {
-        border-top-right-radius: var(--#{$toggle-group}__item--last-child__button--BorderTopRightRadius);
-        border-bottom-right-radius: var(--#{$toggle-group}__item--last-child__button--BorderBottomRightRadius);
+        border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderTopRightRadius);
+        border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderBottomRightRadius);
       }
     }
   }
@@ -86,7 +86,10 @@
   position: relative;
   z-index: var(--#{$toggle-group}__button--ZIndex);
   display: inline-flex;
-  padding: var(--#{$toggle-group}__button--PaddingTop) var(--#{$toggle-group}__button--PaddingRight) var(--#{$toggle-group}__button--PaddingBottom) var(--#{$toggle-group}__button--PaddingLeft);
+  padding-block-start: var(--#{$toggle-group}__button--PaddingTop);
+  padding-block-end: var(--#{$toggle-group}__button--PaddingBottom);
+  padding-inline-start: var(--#{$toggle-group}__button--PaddingLeft);
+  padding-inline-end: var(--#{$toggle-group}__button--PaddingRight);
   font-size: var(--#{$toggle-group}__button--FontSize);
   line-height: var(--#{$toggle-group}__button--LineHeight);
   color: var(--#{$toggle-group}__button--Color);
@@ -95,10 +98,10 @@
 
   &::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: "";
     border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
@@ -136,7 +139,7 @@
 
 .#{$toggle-group}__icon + .#{$toggle-group}__text,
 .#{$toggle-group}__text + .#{$toggle-group}__icon {
-  margin-left: var(--#{$toggle-group}__icon--text--MarginLeft);
+  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule