@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.2

package/css/components/MultipleFileUpload/multiple-file-upload.css

@@ -33,7 +33,7 @@
   --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
   --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
   --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
     "title upload"
@@ -93,7 +93,10 @@
   grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
-  padding: var(--pf-v5-c-multiple-file-upload__main--PaddingTop) var(--pf-v5-c-multiple-file-upload__main--PaddingRight) var(--pf-v5-c-multiple-file-upload__main--PaddingBottom) var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
   text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
   background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
   border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
@@ -116,7 +119,7 @@
 
 .pf-v5-c-multiple-file-upload__title-text-separator {
   display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
-  margin-top: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
 }
 
 .pf-v5-c-multiple-file-upload__upload {
@@ -125,7 +128,7 @@
 
 .pf-v5-c-multiple-file-upload__info {
   grid-area: info;
-  margin-top: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
   font-size: var(--pf-v5-c-multiple-file-upload__info--FontSize);
   color: var(--pf-v5-c-multiple-file-upload__info--Color);
 }
@@ -149,9 +152,9 @@
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__status-item--Gap);
-  padding-top: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
-  padding-bottom: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
-  border-bottom: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
+  border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
 }
 .pf-v5-c-multiple-file-upload__status-item:first-child {
   --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
@@ -162,7 +165,7 @@
 }
 
 .pf-v5-c-multiple-file-upload__status-item-close {
-  margin-top: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
 }
 
 .pf-v5-c-multiple-file-upload__status-item-progress {

package/css/components/Nav/nav.css

@@ -347,7 +347,7 @@
   --pf-v5-c-menu__item-description--Color: var(--pf-v5-c-nav--c-menu__item-description--Color);
 }
 .pf-v5-c-nav .pf-v5-c-menu:first-child > .pf-v5-c-menu__content {
-  border-bottom: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
 }
 .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
   --pf-v5-c-menu--BoxShadow: var(--pf-v5-c-nav--c-menu--m-flyout--BoxShadow);
@@ -359,10 +359,10 @@
   --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight);
   --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom);
   --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft);
-  top: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top);
-  right: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right);
-  bottom: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom);
-  left: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left);
+  inset-block-start: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Top);
+  inset-block-end: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom);
+  inset-inline-start: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Left);
+  inset-inline-end: var(--pf-v5-c-nav--c-menu--m-flyout--c-menu--Right);
 }
 .pf-v5-c-nav .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__item:hover {
   --pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth);
@@ -377,8 +377,8 @@
   --pf-v5-c-nav--c-menu--m-flyout--c-menu--Left: auto;
 }
 .pf-v5-c-nav .pf-v5-c-menu .pf-v5-c-divider {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 .pf-v5-c-nav .pf-v5-c-menu__item {
   position: relative;
@@ -386,19 +386,19 @@
 }
 .pf-v5-c-nav .pf-v5-c-menu__item::before, .pf-v5-c-nav .pf-v5-c-menu__item::after {
   position: absolute;
-  top: 0;
+  inset-block-start: 0;
   content: "";
 }
 .pf-v5-c-nav .pf-v5-c-menu__item::before {
-  right: 0;
-  bottom: calc(var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
-  left: 0;
-  border-bottom: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
+  inset-block-end: calc(var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) * -1);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  border-block-end: var(--pf-v5-c-nav--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav--c-menu__item--before--BorderBottomColor);
 }
 .pf-v5-c-nav .pf-v5-c-menu__item::after {
-  bottom: 0;
-  left: 0;
-  border-left: var(--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-v5-c-nav--c-menu__item--after--BorderLeftColor);
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  border-inline-start: var(--pf-v5-c-nav--c-menu__item--after--BorderLeftWidth) solid var(--pf-v5-c-nav--c-menu__item--after--BorderLeftColor);
 }
 .pf-v5-c-nav .pf-v5-c-menu__item.pf-m-current {
   --pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: var(--pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth);
@@ -412,8 +412,12 @@
   --pf-v5-c-menu__item--FontWeight: var(--pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
 }
 .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
-  margin-left: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
+  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
   content: none;
 }
@@ -452,16 +456,16 @@
   white-space: nowrap;
 }
 .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::before, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::before, .pf-v5-c-nav.pf-m-horizontal-subnav .pf-v5-c-nav__link::before {
-  top: auto;
-  bottom: 0;
+  inset-block-start: auto;
+  inset-block-end: 0;
 }
 .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::before {
-  right: var(--pf-v5-c-nav--m-horizontal__link--Right);
-  left: var(--pf-v5-c-nav--m-horizontal__link--Left);
+  inset-inline-start: var(--pf-v5-c-nav--m-horizontal__link--Left);
+  inset-inline-end: var(--pf-v5-c-nav--m-horizontal__link--Right);
 }
 .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::before {
-  right: var(--pf-v5-c-nav--m-tertiary__link--Right);
-  left: var(--pf-v5-c-nav--m-tertiary__link--Left);
+  inset-inline-start: var(--pf-v5-c-nav--m-tertiary__link--Left);
+  inset-inline-end: var(--pf-v5-c-nav--m-tertiary__link--Right);
 }
 .pf-v5-c-nav.pf-m-light {
   --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-c-nav--m-light__item--before--BorderColor);
@@ -579,20 +583,20 @@
 }
 .pf-v5-c-nav .pf-v5-c-divider {
   --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-nav--c-divider--BackgroundColor);
-  padding-right: var(--pf-v5-c-nav--c-divider--PaddingRight);
-  padding-left: var(--pf-v5-c-nav--c-divider--PaddingLeft);
-  margin-top: var(--pf-v5-c-nav--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-nav--c-divider--MarginBottom);
+  padding-inline-start: var(--pf-v5-c-nav--c-divider--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-nav--c-divider--PaddingRight);
+  margin-block-start: var(--pf-v5-c-nav--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-nav--c-divider--MarginBottom);
 }
 .pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button {
   opacity: 1;
 }
 .pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button:nth-of-type(1) {
-  margin-right: 0;
+  margin-inline-end: 0;
   transform: translateX(0);
 }
 .pf-v5-c-nav.pf-m-scrollable .pf-v5-c-nav__scroll-button:nth-of-type(2) {
-  margin-left: 0;
+  margin-inline-start: 0;
   transform: translateX(0);
 }
 .pf-v5-c-nav.pf-m-overflow-hidden {
@@ -602,8 +606,8 @@
 .pf-v5-c-nav__list {
   position: relative;
   display: block;
-  padding-top: var(--pf-v5-c-nav__list--PaddingTop);
-  padding-bottom: var(--pf-v5-c-nav__list--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-nav__list--PaddingTop);
+  padding-block-end: var(--pf-v5-c-nav__list--PaddingBottom);
 }
 
 .pf-v5-c-nav__item {
@@ -614,14 +618,14 @@
 }
 .pf-v5-c-nav__item.pf-m-expandable::before {
   position: absolute;
-  right: 0;
-  bottom: calc(var(--pf-v5-c-nav__item--before--BorderWidth) * -1);
-  left: 0;
+  inset-block-end: calc(var(--pf-v5-c-nav__item--before--BorderWidth) * -1);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
-  border-bottom: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
+  border-block-end: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
 }
 .pf-v5-c-nav__item:not(:first-child) {
-  margin-top: var(--pf-v5-c-nav__item--MarginTop);
+  margin-block-start: var(--pf-v5-c-nav__item--MarginTop);
 }
 .pf-v5-c-nav__item .pf-v5-c-nav__item:not(.pf-m-expanded) .pf-v5-c-nav__toggle-icon {
   transform: rotate(0);
@@ -632,18 +636,18 @@
 }
 @media screen and (min-width: 1200px) {
   .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable::before {
-    border-bottom: none;
+    border-block-end: none;
   }
 }
 .pf-v5-c-nav__item .pf-v5-c-nav__item.pf-m-expandable .pf-v5-c-nav__list::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-left: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
+  border-inline-start: var(--pf-v5-c-nav__item--before--BorderWidth) solid var(--pf-v5-c-nav__item--before--BorderColor);
 }
 .pf-v5-c-nav__item .pf-v5-c-nav__toggle-icon {
   transform: rotate(var(--pf-v5-c-nav__item__toggle-icon--Rotate));
@@ -679,11 +683,11 @@
   --pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: var(--pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom);
   --pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: var(--pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right);
   position: absolute;
-  top: var(--pf-v5-c-nav__item--m-flyout--c-menu--Top);
-  left: var(--pf-v5-c-nav__item--m-flyout--c-menu--Left);
+  inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--Top);
+  inset-inline-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--Left);
 }
 .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu {
-  top: var(--pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top);
+  inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top);
 }
 .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child {
   --pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
@@ -695,22 +699,22 @@
 }
 .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__item::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
-  border-bottom: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
 }
 .pf-v5-c-nav__item.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
   position: absolute;
-  top: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   content: "";
-  border-left: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
 }
 .pf-v5-c-nav__item.pf-m-drilldown.pf-m-expanded > .pf-v5-c-nav__subnav {
-  left: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v5-c-nav__item--m-drilldown--m-expanded__subnav--ZIndex);
 }
 
@@ -718,7 +722,10 @@
   position: relative;
   display: flex;
   align-items: baseline;
-  padding: var(--pf-v5-c-nav__link--PaddingTop) var(--pf-v5-c-nav__link--PaddingRight) var(--pf-v5-c-nav__link--PaddingBottom) var(--pf-v5-c-nav__link--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-nav__link--PaddingTop);
+  padding-block-end: var(--pf-v5-c-nav__link--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-nav__link--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-nav__link--PaddingRight);
   font-size: var(--pf-v5-c-nav__link--FontSize);
   font-weight: var(--pf-v5-c-nav__link--FontWeight);
   color: var(--pf-v5-c-nav__link--Color);
@@ -731,63 +738,63 @@
   border: 0 solid;
 }
 .pf-v5-c-nav__link::before {
-  right: 0;
-  bottom: calc(var(--pf-v5-c-nav__link--before--BorderBottomWidth) * -1);
-  left: 0;
+  inset-block-end: calc(var(--pf-v5-c-nav__link--before--BorderBottomWidth) * -1);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   border-color: var(--pf-v5-c-nav__link--before--BorderColor);
-  border-bottom-width: var(--pf-v5-c-nav__link--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-nav__link--before--BorderBottomWidth);
 }
 .pf-v5-c-nav__link::after {
-  top: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   border: 0 solid;
   border-color: var(--pf-v5-c-nav__link--after--BorderColor);
-  border-left-width: var(--pf-v5-c-nav__link--after--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-nav__link--after--BorderLeftWidth);
 }
 .pf-v5-c-nav__link:hover, .pf-v5-c-nav__link.pf-m-hover {
   color: var(--pf-v5-c-nav__link--hover--Color);
   background-color: var(--pf-v5-c-nav__link--hover--BackgroundColor);
 }
 .pf-v5-c-nav__link:hover::before, .pf-v5-c-nav__link.pf-m-hover::before {
-  border-bottom-width: var(--pf-v5-c-nav__link--hover--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-nav__link--hover--before--BorderBottomWidth);
 }
 .pf-v5-c-nav__link:hover::after, .pf-v5-c-nav__link.pf-m-hover::after {
   border-color: var(--pf-v5-c-nav__link--hover--after--BorderColor);
-  border-left-width: var(--pf-v5-c-nav__link--hover--after--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-nav__link--hover--after--BorderLeftWidth);
 }
 .pf-v5-c-nav__link:focus {
   color: var(--pf-v5-c-nav__link--focus--Color);
   background-color: var(--pf-v5-c-nav__link--focus--BackgroundColor);
 }
 .pf-v5-c-nav__link:focus::before {
-  border-bottom-width: var(--pf-v5-c-nav__link--focus--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-nav__link--focus--before--BorderBottomWidth);
 }
 .pf-v5-c-nav__link:focus::after {
   border-color: var(--pf-v5-c-nav__link--focus--after--BorderColor);
-  border-left-width: var(--pf-v5-c-nav__link--focus--after--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-nav__link--focus--after--BorderLeftWidth);
 }
 .pf-v5-c-nav__link:active {
   color: var(--pf-v5-c-nav__link--active--Color);
   background-color: var(--pf-v5-c-nav__link--active--BackgroundColor);
 }
 .pf-v5-c-nav__link:active::before {
-  border-bottom-width: var(--pf-v5-c-nav__link--active--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-nav__link--active--before--BorderBottomWidth);
 }
 .pf-v5-c-nav__link:active::after {
   border-color: var(--pf-v5-c-nav__link--active--after--BorderColor);
-  border-left-width: var(--pf-v5-c-nav__link--active--after--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-nav__link--active--after--BorderLeftWidth);
 }
 .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link {
   color: var(--pf-v5-c-nav__link--m-current--Color);
   background-color: var(--pf-v5-c-nav__link--m-current--BackgroundColor);
 }
 .pf-v5-c-nav__link.pf-m-current::before, .pf-v5-c-nav__link.pf-m-current:hover::before, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::before {
-  border-bottom-width: var(--pf-v5-c-nav__link--m-current--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-nav__link--m-current--before--BorderBottomWidth);
 }
 .pf-v5-c-nav__link.pf-m-current::after, .pf-v5-c-nav__link.pf-m-current:hover::after, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after {
   border-color: var(--pf-v5-c-nav__link--m-current--after--BorderColor);
-  border-left-width: var(--pf-v5-c-nav__link--m-current--after--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-nav__link--m-current--after--BorderLeftWidth);
 }
 .pf-v5-c-nav__link, .pf-v5-c-nav__link:hover, .pf-v5-c-nav__link:focus, .pf-v5-c-nav__link:active {
   width: 100%;
@@ -814,8 +821,8 @@
   --pf-v5-c-nav--c-divider--PaddingRight: var(--pf-v5-c-nav__subnav--c-divider--PaddingRight);
   --pf-v5-c-nav--c-divider--PaddingLeft: var(--pf-v5-c-nav__subnav--c-divider--PaddingLeft);
   max-height: var(--pf-v5-c-nav__subnav--MaxHeight);
-  padding-bottom: var(--pf-v5-c-nav__subnav--PaddingBottom);
-  padding-left: var(--pf-v5-c-nav__subnav--PaddingLeft);
+  padding-block-end: var(--pf-v5-c-nav__subnav--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-nav__subnav--PaddingLeft);
   transition: var(--pf-v5-c-nav--Transition);
   scrollbar-width: none;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -839,21 +846,25 @@
 
 .pf-v5-c-nav__toggle {
   flex: none;
-  padding-right: var(--pf-v5-c-nav__toggle--PaddingRight);
-  padding-left: var(--pf-v5-c-nav__toggle--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--pf-v5-c-nav__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-nav__toggle--PaddingRight);
+  margin-inline-start: auto;
   font-size: var(--pf-v5-c-nav__toggle--FontSize);
   line-height: 1;
 }
 .pf-v5-c-nav__toggle.pf-m-start {
-  margin-right: var(--pf-v5-c-nav__toggle--m-start--MarginRight);
-  margin-left: calc(var(--pf-v5-c-nav__toggle--PaddingRight) * -1);
+  margin-inline-start: calc(var(--pf-v5-c-nav__toggle--PaddingRight) * -1);
+  margin-inline-end: var(--pf-v5-c-nav__toggle--m-start--MarginRight);
 }
 
 .pf-v5-c-nav__toggle-icon {
   display: inline-block;
   transition: var(--pf-v5-c-nav__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
   transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
@@ -879,21 +890,24 @@
   --pf-v5-c-nav--c-divider--MarginBottom: 0;
 }
 .pf-v5-c-nav__section:first-child {
-  padding-top: var(--pf-v5-c-nav__section--first-child--PaddingTop);
+  padding-block-start: var(--pf-v5-c-nav__section--first-child--PaddingTop);
 }
 .pf-v5-c-nav__section + .pf-v5-c-nav__section {
-  margin-top: var(--pf-v5-c-nav__section--section--MarginTop);
+  margin-block-start: var(--pf-v5-c-nav__section--section--MarginTop);
 }
 .pf-v5-c-nav__section:last-child {
-  padding-bottom: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
 }
 
 .pf-v5-c-nav__section-title {
-  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
-  margin-bottom: var(--pf-v5-c-nav__section-title--MarginBottom);
+  padding-block-start: var(--pf-v5-c-nav__section-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-nav__section-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-nav__section-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-nav__section-title--PaddingRight);
+  margin-block-end: var(--pf-v5-c-nav__section-title--MarginBottom);
   font-size: var(--pf-v5-c-nav__section-title--FontSize);
   color: var(--pf-v5-c-nav__section-title--Color);
-  border-bottom: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
 }
 
 .pf-v5-c-nav__scroll-button {
@@ -906,13 +920,18 @@
   opacity: 0;
   transition: var(--pf-v5-c-nav__scroll-button--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__scroll-button::before {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
   content: "";
-  border: solid var(--pf-v5-c-nav__scroll-button--before--BorderColor);
-  border-width: 0 var(--pf-v5-c-nav__scroll-button--before--BorderRightWidth) 0 var(--pf-v5-c-nav__scroll-button--before--BorderLeftWidth);
+  border: 0 solid var(--pf-v5-c-nav__scroll-button--before--BorderColor);
+  border-inline-start-width: var(--pf-v5-c-nav__scroll-button--before--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-nav__scroll-button--before--BorderRightWidth);
 }
 .pf-v5-c-nav__scroll-button:hover {
   color: var(--pf-v5-c-nav__scroll-button--hover--Color);
@@ -929,19 +948,27 @@
 }
 .pf-v5-c-nav__scroll-button:nth-of-type(1) {
   --pf-v5-c-nav__scroll-button--before--BorderRightWidth: var(--pf-v5-c-nav__scroll-button--before--BorderWidth);
-  margin-right: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
+  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-nav__scroll-button:nth-of-type(2) {
   --pf-v5-c-nav__scroll-button--before--BorderLeftWidth: var(--pf-v5-c-nav__scroll-button--before--BorderWidth);
-  margin-left: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
+  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
+  transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-nav {
@@ -963,10 +990,10 @@
   --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0;
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-nav__link::before {
-  bottom: 0;
+  inset-block-end: 0;
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-nav__link::after {
-  top: var(--pf-v5-c-nav__item--item__link--after--Top);
+  inset-block-start: var(--pf-v5-c-nav__item--item__link--after--Top);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-nav__item + .pf-v5-c-nav__item {
   --pf-v5-c-nav__link--after--Top: var(--pf-v5-c-nav__item--item__link--after--Top);

package/css/components/Nav/nav.d.ts

@@ -1,5 +1,6 @@
 import './nav.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuContent": "pf-v5-c-menu__content",
@@ -34,6 +35,7 @@ declare const _default: {
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
   "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./nav.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuContent": "pf-v5-c-menu__content",
@@ -36,5 +37,6 @@ exports.default = {
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
   "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Nav/nav.mjs

@@ -1,5 +1,6 @@
 import './nav.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuContent": "pf-v5-c-menu__content",
@@ -34,5 +35,6 @@ export default {
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
   "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/NotificationBadge/notification-badge.css

@@ -34,17 +34,23 @@
   --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
   position: relative;
   display: inline-block;
-  padding: var(--pf-v5-c-notification-badge--PaddingTop) var(--pf-v5-c-notification-badge--PaddingRight) var(--pf-v5-c-notification-badge--PaddingBottom) var(--pf-v5-c-notification-badge--PaddingLeft);
-  margin: var(--pf-v5-c-notification-badge--MarginTop) var(--pf-v5-c-notification-badge--MarginRight) var(--pf-v5-c-notification-badge--MarginBottom) var(--pf-v5-c-notification-badge--MarginLeft);
+  padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-badge--PaddingRight);
+  margin-block-start: var(--pf-v5-c-notification-badge--MarginTop);
+  margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
   background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
   border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
 }
 .pf-v5-c-notification-badge::before {
   position: absolute;
-  top: var(--pf-v5-c-notification-badge--after--Top);
-  right: var(--pf-v5-c-notification-badge--after--Right);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
   width: var(--pf-v5-c-notification-badge--after--Width);
   height: var(--pf-v5-c-notification-badge--after--Height);
   content: "";
@@ -95,7 +101,7 @@
 }
 
 .pf-v5-c-notification-badge__count {
-  margin-left: var(--pf-v5-c-notification-badge__count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {