@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/components/Menu/menu.css

@@ -211,7 +211,7 @@
   --pf-v5-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-menu--m-nav--c-menu--m-left--right-offset));
   --pf-v5-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-menu--m-nav--c-menu--m-top--bottom-offset));
   --pf-v5-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
-  top: var(--pf-v5-c-menu--Top);
+  inset-block-start: var(--pf-v5-c-menu--Top);
   z-index: var(--pf-v5-c-menu--ZIndex);
   width: var(--pf-v5-c-menu--Width);
   min-width: var(--pf-v5-c-menu--MinWidth);
@@ -222,15 +222,15 @@
   overflow: visible;
 }
 .pf-v5-c-menu .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-menu--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-menu--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-menu--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-menu--c-divider--MarginBottom);
 }
 .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu {
   position: absolute;
-  top: var(--pf-v5-c-menu--m-flyout__menu--Top);
-  right: var(--pf-v5-c-menu--m-flyout__menu--Right);
-  bottom: var(--pf-v5-c-menu--m-flyout__menu--Bottom);
-  left: var(--pf-v5-c-menu--m-flyout__menu--Left);
+  inset-block-start: var(--pf-v5-c-menu--m-flyout__menu--Top);
+  inset-block-end: var(--pf-v5-c-menu--m-flyout__menu--Bottom);
+  inset-inline-start: var(--pf-v5-c-menu--m-flyout__menu--Left);
+  inset-inline-end: var(--pf-v5-c-menu--m-flyout__menu--Right);
 }
 .pf-v5-c-menu .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu__content, .pf-v5-c-menu.pf-m-flyout .pf-v5-c-menu .pf-v5-c-menu__content {
   overflow-y: visible;
@@ -259,17 +259,25 @@
 .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
   --pf-v5-c-menu--BoxShadow: none;
   position: absolute;
-  top: var(--pf-v5-c-menu--m-drilldown--c-menu--Top);
-  left: 100%;
+  inset-block-start: var(--pf-v5-c-menu--m-drilldown--c-menu--Top);
+  inset-inline-start: 100%;
   width: 100%;
   transition: var(--pf-v5-c-menu--m-drilldown--c-menu--Transition);
 }
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
   position: relative;
   overflow: hidden;
@@ -341,34 +349,34 @@
 }
 .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item::before, .pf-v5-c-menu.pf-m-nav .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-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-v5-c-menu--m-nav__item--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-v5-c-menu--m-nav__item--before--BorderBottomColor);
 }
 .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu__item:hover::after, .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__item:hover::after {
   position: absolute;
-  top: var(--pf-v5-c-menu--m-nav__item--hover--after--Top);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-menu--m-nav__item--hover--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   content: "";
-  border-left: var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-v5-c-menu--m-nav__item--hover--after--BorderLeftColor);
 }
 .pf-v5-c-menu.pf-m-nav .pf-v5-c-menu {
   width: 100%;
 }
 .pf-v5-c-menu.pf-m-flyout.pf-m-nav, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu {
-  top: var(--pf-v5-c-menu--m-nav--c-menu--Top);
-  left: var(--pf-v5-c-menu--m-nav--c-menu--Left);
+  inset-block-start: var(--pf-v5-c-menu--m-nav--c-menu--Top);
+  inset-inline-start: var(--pf-v5-c-menu--m-nav--c-menu--Left);
 }
 .pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-top {
   --pf-v5-c-menu--m-nav--c-menu--Top: auto;
-  bottom: var(--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom);
+  inset-block-end: var(--pf-v5-c-menu--m-nav--c-menu--m-top--Bottom);
 }
 .pf-v5-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu.pf-m-left {
   --pf-v5-c-menu--m-nav--c-menu--Left: auto;
-  right: var(--pf-v5-c-menu--m-nav--c-menu--m-left--Right);
+  inset-inline-end: var(--pf-v5-c-menu--m-nav--c-menu--m-left--Right);
 }
 .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu__list-item:first-child, .pf-v5-c-menu.pf-m-flyout.pf-m-nav .pf-v5-c-menu .pf-v5-c-menu__list-item:first-child {
   --pf-v5-c-menu--m-nav__item--hover--after--Top: var(--pf-v5-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
@@ -381,7 +389,10 @@
   display: flex;
   align-items: center;
   min-height: var(--pf-v5-c-menu__breadcrumb--MinHeight);
-  padding: var(--pf-v5-c-menu__breadcrumb--PaddingTop) var(--pf-v5-c-menu__breadcrumb--PaddingRight) var(--pf-v5-c-menu__breadcrumb--PaddingBottom) var(--pf-v5-c-menu__breadcrumb--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__breadcrumb--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__breadcrumb--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu__breadcrumb--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__breadcrumb--PaddingRight);
 }
 .pf-v5-c-menu__breadcrumb .pf-v5-c-breadcrumb {
   --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-c-menu__breadcrumb--c-breadcrumb__item--FontSize);
@@ -401,17 +412,17 @@
   --pf-v5-c-menu__item--PaddingRight: var(--pf-v5-c-menu__header--c-menu__item--PaddingRight);
   --pf-v5-c-menu__item--PaddingBottom: var(--pf-v5-c-menu__header--c-menu__item--PaddingBottom);
   --pf-v5-c-menu__item--PaddingLeft: var(--pf-v5-c-menu__header--c-menu__item--PaddingLeft);
-  padding-top: var(--pf-v5-c-menu__header--PaddingTop);
-  padding-right: var(--pf-v5-c-menu__header--PaddingRight);
-  padding-bottom: var(--pf-v5-c-menu__header--PaddingBottom);
-  padding-left: var(--pf-v5-c-menu__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__header--PaddingRight);
 }
 .pf-v5-c-menu__header > .pf-v5-c-menu__item {
   --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--BackgroundColor);
-  margin-top: var(--pf-v5-c-menu__header--c-menu__item--MarginTop);
-  margin-right: var(--pf-v5-c-menu__header--c-menu__item--MarginRight);
-  margin-bottom: var(--pf-v5-c-menu__header--c-menu__item--MarginBottom);
-  margin-left: var(--pf-v5-c-menu__header--c-menu__item--MarginLeft);
+  margin-block-start: var(--pf-v5-c-menu__header--c-menu__item--MarginTop);
+  margin-block-end: var(--pf-v5-c-menu__header--c-menu__item--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-menu__header--c-menu__item--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-menu__header--c-menu__item--MarginRight);
 }
 .pf-v5-c-menu__header > .pf-v5-c-menu__item:hover {
   --pf-v5-c-menu__item--BackgroundColor: var(--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor);
@@ -424,20 +435,20 @@
 }
 
 .pf-v5-c-menu__search {
-  padding-top: var(--pf-v5-c-menu__search--PaddingTop);
-  padding-right: var(--pf-v5-c-menu__search--PaddingRight);
-  padding-bottom: var(--pf-v5-c-menu__search--PaddingBottom);
-  padding-left: var(--pf-v5-c-menu__search--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu__search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__search--PaddingRight);
 }
 
 .pf-v5-c-menu__list {
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-menu__list--Display);
-  padding-top: var(--pf-v5-c-menu__list--PaddingTop);
-  padding-bottom: var(--pf-v5-c-menu__list--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-menu__list--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__list--PaddingBottom);
 }
 .pf-v5-c-menu__list > .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-menu__list--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-menu__list--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-menu__list--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-menu__list--c-divider--MarginBottom);
 }
 
 .pf-v5-c-menu__list-item {
@@ -475,7 +486,7 @@
   --pf-v5-c-menu__list-item--hover--BackgroundColor: transparent;
   --pf-v5-c-menu__list-item--focus-within--BackgroundColor: transparent;
   justify-content: center;
-  padding-top: var(--pf-v5-c-menu__list-item--m-loading--PaddingTop);
+  padding-block-start: var(--pf-v5-c-menu__list-item--m-loading--PaddingTop);
   overflow: hidden;
 }
 .pf-v5-c-menu__list-item.pf-m-danger {
@@ -487,15 +498,15 @@
   flex-basis: 100%;
   flex-direction: column;
   min-width: 0;
-  padding-top: var(--pf-v5-c-menu__item--PaddingTop);
-  padding-right: var(--pf-v5-c-menu__item--PaddingRight);
-  padding-bottom: var(--pf-v5-c-menu__item--PaddingBottom);
-  padding-left: var(--pf-v5-c-menu__item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu__item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__item--PaddingRight);
   font-size: var(--pf-v5-c-menu__item--FontSize);
   font-weight: var(--pf-v5-c-menu__item--FontWeight);
   line-height: var(--pf-v5-c-menu__item--LineHeight);
   color: var(--pf-v5-c-menu__item--Color);
-  text-align: left;
+  text-align: start;
   background-color: var(--pf-v5-c-menu__item--BackgroundColor);
   border: none;
 }
@@ -519,7 +530,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 }
 
 .pf-v5-c-menu__item-external-icon {
-  margin-left: var(--pf-v5-c-menu__item-external-icon--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-menu__item-external-icon--MarginLeft);
   font-size: var(--pf-v5-c-menu__item-external-icon--FontSize);
   color: var(--pf-v5-c-menu__item-external-icon--Color);
   opacity: var(--pf-v5-c-menu__item-external-icon--Opacity);
@@ -537,9 +548,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 }
 
 .pf-v5-c-menu__group-title {
-  padding-top: var(--pf-v5-c-menu__group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-menu__group-title--PaddingRight);
-  padding-left: var(--pf-v5-c-menu__group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__group-title--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-menu__group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__group-title--PaddingRight);
   font-size: var(--pf-v5-c-menu__group-title--FontSize);
   font-weight: var(--pf-v5-c-menu__group-title--FontWeight);
   color: var(--pf-v5-c-menu__group-title--Color);
@@ -552,31 +563,37 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 }
 
 .pf-v5-c-menu__item-icon {
-  margin-right: var(--pf-v5-c-menu__item-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-menu__item-icon--MarginRight);
 }
 
 .pf-v5-c-menu__item-check {
   display: flex;
   align-items: center;
-  margin-right: var(--pf-v5-c-menu__item-check--MarginRight);
+  margin-inline-end: var(--pf-v5-c-menu__item-check--MarginRight);
+}
+.pf-v5-c-menu__item-check .pf-v5-c-check {
+  --pf-v5-c-check__input--TranslateY: none;
 }
 
 .pf-v5-c-menu__item-toggle-icon {
-  padding-right: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
-  padding-left: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
   color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
-  margin-left: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
 }
 
 .pf-v5-c-menu__item-toggle-icon + .pf-v5-c-menu__item-text {
-  margin-left: var(--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-menu__item-toggle-icon--item-text--MarginLeft);
 }
 
 .pf-v5-c-menu__item-select-icon {
-  margin-left: var(--pf-v5-c-menu__item-select-icon--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-menu__item-select-icon--MarginLeft);
   font-size: var(--pf-v5-c-menu__item-select-icon--FontSize);
   color: var(--pf-v5-c-menu__item-select-icon--Color);
   opacity: 0;
@@ -584,10 +601,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 
 .pf-v5-c-menu__item-action {
   display: flex;
-  padding-top: var(--pf-v5-c-menu__item-action--PaddingTop);
-  padding-right: var(--pf-v5-c-menu__item-action--PaddingRight);
-  padding-bottom: var(--pf-v5-c-menu__item-action--PaddingBottom);
-  padding-left: var(--pf-v5-c-menu__item-action--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__item-action--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__item-action--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu__item-action--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__item-action--PaddingRight);
   color: var(--pf-v5-c-menu__item-action--Color);
   background-color: var(--pf-v5-c-menu__item-action--BackgroundColor);
   border: none;
@@ -614,18 +631,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 
 .pf-v5-c-menu__footer {
   position: relative;
-  padding: var(--pf-v5-c-menu__footer--PaddingTop) var(--pf-v5-c-menu__footer--PaddingRight) var(--pf-v5-c-menu__footer--PaddingBottom) var(--pf-v5-c-menu__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu__footer--PaddingRight);
   box-shadow: var(--pf-v5-c-menu__footer--BoxShadow);
 }
 .pf-v5-c-menu__footer::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
-  border-top: var(--pf-v5-c-menu__footer--after--BorderTopWidth) solid var(--pf-v5-c-menu__footer--after--BorderTopColor);
+  border-block-start: var(--pf-v5-c-menu__footer--after--BorderTopWidth) solid var(--pf-v5-c-menu__footer--after--BorderTopColor);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-menu {

package/components/Menu/menu.scss

@@ -221,7 +221,7 @@
   --#{$menu}--m-nav--c-menu--m-top--Bottom: calc(0 + var(--#{$menu}--m-nav--c-menu--m-top--bottom-offset));
   --#{$menu}--m-nav__list-item--first-child--c-menu--Top: 0;
 
-  top: var(--#{$menu}--Top);
+ inset-block-start: var(--#{$menu}--Top);
   z-index: var(--#{$menu}--ZIndex);
   width: var(--#{$menu}--Width);
   min-width: var(--#{$menu}--MinWidth);
@@ -235,19 +235,18 @@
   }
 
   .#{$divider} {
-    margin-top: var(--#{$menu}--c-divider--MarginTop);
-    margin-bottom: var(--#{$menu}--c-divider--MarginBottom);
+    margin-block-start: var(--#{$menu}--c-divider--MarginTop);
+    margin-block-end: var(--#{$menu}--c-divider--MarginBottom);
   }
 
   // nested flyout menu
   & &.pf-m-flyout,
   &.pf-m-flyout & {
     position: absolute;
-    top: var(--#{$menu}--m-flyout__menu--Top);
-    right: var(--#{$menu}--m-flyout__menu--Right);
-    bottom: var(--#{$menu}--m-flyout__menu--Bottom);
-    left: var(--#{$menu}--m-flyout__menu--Left);
-
+    inset-block-start: var(--#{$menu}--m-flyout__menu--Top);
+    inset-block-end: var(--#{$menu}--m-flyout__menu--Bottom);
+    inset-inline-start: var(--#{$menu}--m-flyout__menu--Left);
+    inset-inline-end: var(--#{$menu}--m-flyout__menu--Right);
 
     .#{$menu}__content {
       overflow-y: visible;
@@ -283,7 +282,11 @@
       // target first list in menu
       > .#{$menu}__content > .#{$menu}__list,
       > .#{$menu}__list {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );
       }
       // stylelint-enable
     }
@@ -293,14 +296,18 @@
       --#{$menu}--BoxShadow: none;
 
       position: absolute;
-      top: var(--#{$menu}--m-drilldown--c-menu--Top);
-      left: 100%;
+     inset-block-start: var(--#{$menu}--m-drilldown--c-menu--Top);
+     inset-inline-start: 100%;
       width: 100%;
       transition: var(--#{$menu}--m-drilldown--c-menu--Transition);
 
       // stylelint-disable selector-max-class
       &.pf-m-drilled-in {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );
       }
       // stylelint-enable
     }
@@ -402,21 +409,21 @@
 
       &::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(--#{$menu}--m-nav__item--before--BorderBottomWidth) solid var(--#{$menu}--m-nav__item--before--BorderBottomColor);
+        border-block-end: var(--#{$menu}--m-nav__item--before--BorderBottomWidth) solid var(--#{$menu}--m-nav__item--before--BorderBottomColor);
       }
 
       &:hover {
         &::after {
           position: absolute;
-          top: var(--#{$menu}--m-nav__item--hover--after--Top);
-          bottom: 0;
-          left: 0;
+         inset-block-start: var(--#{$menu}--m-nav__item--hover--after--Top);
+         inset-block-end: 0;
+         inset-inline-start: 0;
           content: "";
-          border-left: var(--#{$menu}--m-nav__item--hover--after--BorderLeftWidth) solid var(--#{$menu}--m-nav__item--hover--after--BorderLeftColor);
+          border-inline-start: var(--#{$menu}--m-nav__item--hover--after--BorderLeftWidth) solid var(--#{$menu}--m-nav__item--hover--after--BorderLeftColor);
         }
       }
     }
@@ -429,20 +436,20 @@
 
   &.pf-m-flyout.pf-m-nav,
   &.pf-m-flyout.pf-m-nav & {
-    top: var(--#{$menu}--m-nav--c-menu--Top);
-    left: var(--#{$menu}--m-nav--c-menu--Left);
+   inset-block-start: var(--#{$menu}--m-nav--c-menu--Top);
+   inset-inline-start: var(--#{$menu}--m-nav--c-menu--Left);
 
     // stylelint-disable selector-max-class
     &.pf-m-top {
       --#{$menu}--m-nav--c-menu--Top: auto;
 
-      bottom: var(--#{$menu}--m-nav--c-menu--m-top--Bottom);
+     inset-block-end: var(--#{$menu}--m-nav--c-menu--m-top--Bottom);
     }
 
     &.pf-m-left {
       --#{$menu}--m-nav--c-menu--Left: auto;
 
-      right: var(--#{$menu}--m-nav--c-menu--m-left--Right);
+     inset-inline-end: var(--#{$menu}--m-nav--c-menu--m-left--Right);
     }
 
     .#{$menu}__list-item:first-child {
@@ -461,7 +468,10 @@
   display: flex;
   align-items: center;
   min-height: var(--#{$menu}__breadcrumb--MinHeight);
-  padding: var(--#{$menu}__breadcrumb--PaddingTop) var(--#{$menu}__breadcrumb--PaddingRight) var(--#{$menu}__breadcrumb--PaddingBottom) var(--#{$menu}__breadcrumb--PaddingLeft);
+  padding-block-start: var(--#{$menu}__breadcrumb--PaddingTop);
+  padding-block-end: var(--#{$menu}__breadcrumb--PaddingBottom);
+  padding-inline-start: var(--#{$menu}__breadcrumb--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__breadcrumb--PaddingRight);
 
   .#{$breadcrumb} {
     --#{$breadcrumb}__item--FontSize: var(--#{$menu}__breadcrumb--c-breadcrumb__item--FontSize);
@@ -486,18 +496,18 @@
   --#{$menu}__item--PaddingBottom: var(--#{$menu}__header--c-menu__item--PaddingBottom);
   --#{$menu}__item--PaddingLeft: var(--#{$menu}__header--c-menu__item--PaddingLeft);
 
-  padding-top: var(--#{$menu}__header--PaddingTop);
-  padding-right: var(--#{$menu}__header--PaddingRight);
-  padding-bottom: var(--#{$menu}__header--PaddingBottom);
-  padding-left: var(--#{$menu}__header--PaddingLeft);
+  padding-block-start: var(--#{$menu}__header--PaddingTop);
+  padding-block-end: var(--#{$menu}__header--PaddingBottom);
+  padding-inline-start: var(--#{$menu}__header--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__header--PaddingRight);
 
   > .#{$menu}__item {
     --#{$menu}__item--BackgroundColor: var(--#{$menu}__header--c-menu__item--BackgroundColor);
 
-    margin-top: var(--#{$menu}__header--c-menu__item--MarginTop);
-    margin-right: var(--#{$menu}__header--c-menu__item--MarginRight);
-    margin-bottom: var(--#{$menu}__header--c-menu__item--MarginBottom);
-    margin-left: var(--#{$menu}__header--c-menu__item--MarginLeft);
+    margin-block-start: var(--#{$menu}__header--c-menu__item--MarginTop);
+    margin-block-end: var(--#{$menu}__header--c-menu__item--MarginBottom);
+    margin-inline-start: var(--#{$menu}__header--c-menu__item--MarginLeft);
+    margin-inline-end: var(--#{$menu}__header--c-menu__item--MarginRight);
 
     &:hover {
       --#{$menu}__item--BackgroundColor: var(--#{$menu}__header--c-menu__item--hover--BackgroundColor);
@@ -515,22 +525,22 @@
 
 // Search
 .#{$menu}__search {
-  padding-top: var(--#{$menu}__search--PaddingTop);
-  padding-right: var(--#{$menu}__search--PaddingRight);
-  padding-bottom: var(--#{$menu}__search--PaddingBottom);
-  padding-left: var(--#{$menu}__search--PaddingLeft);
+  padding-block-start: var(--#{$menu}__search--PaddingTop);
+  padding-block-end: var(--#{$menu}__search--PaddingBottom);
+  padding-inline-start: var(--#{$menu}__search--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__search--PaddingRight);
 }
 
 // List
 .#{$menu}__list {
   @include pf-v5-hidden-visible(var(--#{$menu}__list--Display));
 
-  padding-top: var(--#{$menu}__list--PaddingTop);
-  padding-bottom: var(--#{$menu}__list--PaddingBottom);
+  padding-block-start: var(--#{$menu}__list--PaddingTop);
+  padding-block-end: var(--#{$menu}__list--PaddingBottom);
 
   > .#{$divider} {
-    margin-top: var(--#{$menu}__list--c-divider--MarginTop);
-    margin-bottom: var(--#{$menu}__list--c-divider--MarginBottom);
+    margin-block-start: var(--#{$menu}__list--c-divider--MarginTop);
+    margin-block-end: var(--#{$menu}__list--c-divider--MarginBottom);
   }
 }
 
@@ -559,7 +569,7 @@
     --#{$menu}__item--Color: var(--#{$menu}__list-item--m-disabled__item--Color);
     --#{$menu}__item-toggle-icon: var(--#{$menu}__list-item--m-disabled__item-toggle-icon--Color);
   }
-  
+
   &.pf-m-disabled {
     --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
 
@@ -581,7 +591,7 @@
     --#{$menu}__list-item--focus-within--BackgroundColor: transparent;
 
     justify-content: center;
-    padding-top: var(--#{$menu}__list-item--m-loading--PaddingTop);
+    padding-block-start: var(--#{$menu}__list-item--m-loading--PaddingTop);
     overflow: hidden; // prevents spinner rotation from overflowing
   }
 
@@ -596,15 +606,15 @@
   flex-basis: 100%;
   flex-direction: column;
   min-width: 0;
-  padding-top: var(--#{$menu}__item--PaddingTop);
-  padding-right: var(--#{$menu}__item--PaddingRight);
-  padding-bottom: var(--#{$menu}__item--PaddingBottom);
-  padding-left: var(--#{$menu}__item--PaddingLeft);
+  padding-block-start: var(--#{$menu}__item--PaddingTop);
+  padding-block-end: var(--#{$menu}__item--PaddingBottom);
+  padding-inline-start: var(--#{$menu}__item--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__item--PaddingRight);
   font-size: var(--#{$menu}__item--FontSize);
   font-weight: var(--#{$menu}__item--FontWeight);
   line-height: var(--#{$menu}__item--LineHeight);
   color: var(--#{$menu}__item--Color);
-  text-align: left;
+  text-align: start;
   background-color: var(--#{$menu}__item--BackgroundColor);
   border: none;
 
@@ -635,7 +645,7 @@
 }
 
 .#{$menu}__item-external-icon {
-  margin-left: var(--#{$menu}__item-external-icon--MarginLeft);
+  margin-inline-start: var(--#{$menu}__item-external-icon--MarginLeft);
   font-size: var(--#{$menu}__item-external-icon--FontSize);
   color: var(--#{$menu}__item-external-icon--Color);
   opacity: var(--#{$menu}__item-external-icon--Opacity);
@@ -655,9 +665,9 @@
 
 // Group title
 .#{$menu}__group-title {
-  padding-top: var(--#{$menu}__group-title--PaddingTop);
-  padding-right: var(--#{$menu}__group-title--PaddingRight);
-  padding-left: var(--#{$menu}__group-title--PaddingLeft);
+  padding-block-start: var(--#{$menu}__group-title--PaddingTop);
+  padding-inline-start: var(--#{$menu}__group-title--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__group-title--PaddingRight);
   font-size: var(--#{$menu}__group-title--FontSize);
   font-weight: var(--#{$menu}__group-title--FontWeight);
   color: var(--#{$menu}__group-title--Color);
@@ -672,34 +682,40 @@
 
 // General icon
 .#{$menu}__item-icon {
-  margin-right: var(--#{$menu}__item-icon--MarginRight);
+  margin-inline-end: var(--#{$menu}__item-icon--MarginRight);
 }
 
 // Check
 .#{$menu}__item-check {
   display: flex;
   align-items: center;
-  margin-right: var(--#{$menu}__item-check--MarginRight);
+  margin-inline-end: var(--#{$menu}__item-check--MarginRight);
+
+  .#{$check} {
+    --pf-v5-c-check__input--TranslateY: none;
+  }
 }
 
 // Toggle icon
 .#{$menu}__item-toggle-icon {
-  padding-right: var(--#{$menu}__item-toggle-icon--PaddingRight);
-  padding-left: var(--#{$menu}__item-toggle-icon--PaddingLeft);
+  @include pf-v5-mirror-inline-on-rtl;
+
+  padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
   color: var(--#{$menu}__item-toggle-icon, inherit);
 }
 
 .#{$menu}__item-text + .#{$menu}__item-toggle-icon {
-  margin-left: var(--#{$menu}__item-text--item-toggle-icon--MarginLeft);
+  margin-inline-start: var(--#{$menu}__item-text--item-toggle-icon--MarginLeft);
 }
 
 .#{$menu}__item-toggle-icon + .#{$menu}__item-text {
-  margin-left: var(--#{$menu}__item-toggle-icon--item-text--MarginLeft);
+  margin-inline-start: var(--#{$menu}__item-toggle-icon--item-text--MarginLeft);
 }
 
 // Select icon
 .#{$menu}__item-select-icon {
-  margin-left: var(--#{$menu}__item-select-icon--MarginLeft);
+  margin-inline-start: var(--#{$menu}__item-select-icon--MarginLeft);
   font-size: var(--#{$menu}__item-select-icon--FontSize);
   color: var(--#{$menu}__item-select-icon--Color);
   opacity: 0;
@@ -708,10 +724,10 @@
 // Actions
 .#{$menu}__item-action {
   display: flex;
-  padding-top: var(--#{$menu}__item-action--PaddingTop);
-  padding-right: var(--#{$menu}__item-action--PaddingRight);
-  padding-bottom: var(--#{$menu}__item-action--PaddingBottom);
-  padding-left: var(--#{$menu}__item-action--PaddingLeft);
+  padding-block-start: var(--#{$menu}__item-action--PaddingTop);
+  padding-block-end: var(--#{$menu}__item-action--PaddingBottom);
+  padding-inline-start: var(--#{$menu}__item-action--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__item-action--PaddingRight);
   color: var(--#{$menu}__item-action--Color);
   background-color: var(--#{$menu}__item-action--BackgroundColor);
   border: none;
@@ -747,18 +763,18 @@
 
 .#{$menu}__footer {
   position: relative;
-  padding: var(--#{$menu}__footer--PaddingTop) var(--#{$menu}__footer--PaddingRight) var(--#{$menu}__footer--PaddingBottom) var(--#{$menu}__footer--PaddingLeft);
+  padding-block-start: var(--#{$menu}__footer--PaddingTop);
+  padding-block-end: var(--#{$menu}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$menu}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$menu}__footer--PaddingRight);
   box-shadow: var(--#{$menu}__footer--BoxShadow);
 
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
-    border-top: var(--#{$menu}__footer--after--BorderTopWidth) solid var(--#{$menu}__footer--after--BorderTopColor);
+    border-block-start: var(--#{$menu}__footer--after--BorderTopWidth) solid var(--#{$menu}__footer--after--BorderTopColor);
   }
 }