@patternfly/react-styles 5.0.0 → 5.1.1-prerelease.1

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,7 +412,7 @@
   --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);
 }
 .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 +452,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 +579,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 +602,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 +614,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 +632,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 +679,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 +695,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 +718,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 +734,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 +817,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,15 +842,15 @@
 
 .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 {
@@ -879,21 +882,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 {
@@ -908,11 +914,12 @@
 }
 .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 +936,19 @@
 }
 .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%);
 }
 .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%);
 }
 .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 +970,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/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 {

package/css/components/NotificationDrawer/notification-drawer.css

@@ -80,7 +80,10 @@
   display: flex;
   flex-shrink: 0;
   align-items: baseline;
-  padding: var(--pf-v5-c-notification-drawer__header--PaddingTop) var(--pf-v5-c-notification-drawer__header--PaddingRight) var(--pf-v5-c-notification-drawer__header--PaddingBottom) var(--pf-v5-c-notification-drawer__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-notification-drawer__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-drawer__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__header--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__header--BackgroundColor);
   box-shadow: var(--pf-v5-c-notification-drawer__header--BoxShadow);
 }
@@ -90,13 +93,13 @@
 }
 
 .pf-v5-c-notification-drawer__header-status {
-  margin-left: var(--pf-v5-c-notification-drawer__header-status--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-notification-drawer__header-status--MarginLeft);
 }
 
 .pf-v5-c-notification-drawer__header-action {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .pf-v5-c-notification-drawer__body {
@@ -109,9 +112,12 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
-  padding: var(--pf-v5-c-notification-drawer__list-item--PaddingTop) var(--pf-v5-c-notification-drawer__list-item--PaddingRight) var(--pf-v5-c-notification-drawer__list-item--PaddingBottom) var(--pf-v5-c-notification-drawer__list-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-notification-drawer__list-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-drawer__list-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__list-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__list-item--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__list-item--BackgroundColor);
-  border-bottom: var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-v5-c-notification-drawer__list-item--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-v5-c-notification-drawer__list-item--BorderBottomColor);
   outline-offset: var(--pf-v5-c-notification-drawer__list-item--OutlineOffset);
   box-shadow: var(--pf-v5-c-notification-drawer__list-item--BoxShadow);
 }
@@ -124,8 +130,8 @@
 }
 .pf-v5-c-notification-drawer__list-item::before {
   position: absolute;
-  top: var(--pf-v5-c-notification-drawer__list-item--before--Top);
-  bottom: var(--pf-v5-c-notification-drawer__list-item--before--Bottom);
+  inset-block-start: var(--pf-v5-c-notification-drawer__list-item--before--Top);
+  inset-block-end: var(--pf-v5-c-notification-drawer__list-item--before--Bottom);
   width: var(--pf-v5-c-notification-drawer__list-item--before--Width);
   content: "";
   background-color: var(--pf-v5-c-notification-drawer__list-item--before--BackgroundColor);
@@ -172,11 +178,11 @@
   grid-row: 1/2;
   grid-column: 1/2;
   align-items: baseline;
-  margin-bottom: var(--pf-v5-c-notification-drawer__list-item-header--MarginBottom);
+  margin-block-end: var(--pf-v5-c-notification-drawer__list-item-header--MarginBottom);
 }
 
 .pf-v5-c-notification-drawer__list-item-header-icon {
-  margin-right: var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight);
   color: var(--pf-v5-c-notification-drawer__list-item-header-icon--Color);
 }
 
@@ -199,7 +205,7 @@
 .pf-v5-c-notification-drawer__list-item-description {
   grid-row: 2/3;
   grid-column: 1/2;
-  margin-bottom: var(--pf-v5-c-notification-drawer__list-item-description--MarginBottom);
+  margin-block-end: var(--pf-v5-c-notification-drawer__list-item-description--MarginBottom);
   word-break: break-word;
 }
 
@@ -219,7 +225,7 @@
   min-height: var(--pf-v5-c-notification-drawer__group--m-expanded--MinHeight);
 }
 .pf-v5-c-notification-drawer__group.pf-m-expanded + .pf-v5-c-notification-drawer__group {
-  border-top: var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor);
+  border-block-start: var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor);
 }
 .pf-v5-c-notification-drawer__group .pf-v5-c-notification-drawer__list-item:last-child {
   --pf-v5-c-notification-drawer__list-item--BorderBottomWidth: 0;
@@ -230,10 +236,13 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding: var(--pf-v5-c-notification-drawer__group-toggle--PaddingTop) var(--pf-v5-c-notification-drawer__group-toggle--PaddingRight) var(--pf-v5-c-notification-drawer__group-toggle--PaddingBottom) var(--pf-v5-c-notification-drawer__group-toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-notification-drawer__group-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-notification-drawer__group-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__group-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__group-toggle--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__group-toggle--BackgroundColor);
-  border: solid var(--pf-v5-c-notification-drawer__group-toggle--BorderColor);
-  border-width: 0 0 var(--pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth) 0;
+  border: 0 solid var(--pf-v5-c-notification-drawer__group-toggle--BorderColor);
+  border-block-end-width: var(--pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth);
   outline-offset: var(--pf-v5-c-notification-drawer__group-toggle--OutlineOffset);
 }
 
@@ -243,18 +252,18 @@
   -webkit-line-clamp: var(--pf-v5-c-notification-drawer__group-toggle-title--max-lines);
   overflow: hidden;
   flex: 1;
-  margin-right: var(--pf-v5-c-notification-drawer__group-toggle-title--MarginRight);
-  text-align: left;
+  margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-title--MarginRight);
+  text-align: start;
   word-break: break-word;
 }
 
 .pf-v5-c-notification-drawer__group-toggle-count {
-  margin-right: var(--pf-v5-c-notification-drawer__group-toggle-count--MarginRight);
-  margin-left: auto;
+  margin-inline-start: auto;
+  margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-count--MarginRight);
 }
 
 .pf-v5-c-notification-drawer__group-toggle-icon {
-  margin-right: var(--pf-v5-c-notification-drawer__group-toggle-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-icon--MarginRight);
   color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
 }

package/css/components/NumberInput/number-input.css

@@ -2,8 +2,8 @@
   appearance: textfield;
 }
 .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
-  appearance: none;
   margin: 0;
+  appearance: none;
 }
 
 .pf-v5-c-number-input {
@@ -29,12 +29,12 @@
   width: var(--pf-v5-c-number-input--c-form-control--Width);
 }
 .pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
-  text-align: right;
+  text-align: end;
 }
 
 .pf-v5-c-input-group + .pf-v5-c-number-input__unit,
 .pf-v5-c-number-input__unit + .pf-v5-c-input-group {
-  margin-left: var(--pf-v5-c-number-input__unit--c-input-group--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-number-input__unit--c-input-group--MarginLeft);
 }
 
 .pf-v5-c-number-input__icon {