@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.41

package/components/Nav/nav.css

@@ -2,20 +2,20 @@
   --pf-v5-c-nav--Transition: var(--pf-v5-global--Transition);
   --pf-v5-c-nav--m-light__item--before--BorderColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--active--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
+  --pf-v5-c-nav--m-light__link--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--active--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-nav--m-light__link--before--BorderColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-nav--m-light__link--after--BorderColor: var(--pf-v5-global--active-color--100);
   --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-nav--m-light__section-title--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-nav--m-light__section-title--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-nav--m-light__section-title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-nav--m-light__section-title--BorderBottomColor: transparent;
   --pf-v5-c-nav--m-light--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
   --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
@@ -26,32 +26,34 @@
   --pf-v5-c-nav__item--MarginTop: 0;
   --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
   --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
-  --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-t--global--spacer--xl);
   --pf-v5-c-nav__item__item__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-nav__item__toggle-icon--Rotate: 0;
   --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v5-c-nav__item--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
   --pf-v5-c-nav__item--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-nav__link--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-nav__link--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__link--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--hover--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--focus--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--active--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-global--Color--light-100);
+  --pf-v5-c-nav__link--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-nav__link--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-nav__link--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-nav__link--BackgroundColor: transparent;
-  --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
+  --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-nav__link--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
-  --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
+  --pf-v5-c-nav__link--before--BorderColor: transparent;
   --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0;
   --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0;
@@ -191,16 +193,16 @@
   --pf-v5-c-nav__section__link--active--after--BorderWidth: 0;
   --pf-v5-c-nav__section__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
   --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-nav__section-title--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-nav__section-title--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
+  --pf-v5-c-nav__section-title--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__section-title--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-nav__section-title--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-nav__section-title--BorderBottomColor: transparent;
   --pf-v5-c-nav__section-title--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-nav__scroll-button--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-global--active-color--400);
@@ -347,7 +349,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 +361,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 +379,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 +388,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 +414,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(.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 +458,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 +585,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 +608,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 +620,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 +638,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 +685,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 +701,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 +724,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 +740,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 +823,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 +848,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(.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 +892,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 +922,18 @@
   opacity: 0;
   transition: var(--pf-v5-c-nav__scroll-button--Transition);
 }
+:where(.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 +950,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(.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(.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 +992,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);