@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.11

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;
@@ -262,8 +262,8 @@
 .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);
 }
@@ -341,34 +341,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 +381,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 +404,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 +427,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 +478,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 +490,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 +522,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 +540,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);
@@ -548,35 +551,35 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 .pf-v5-c-menu__item-description {
   font-size: var(--pf-v5-c-menu__item-description--FontSize);
   color: var(--pf-v5-c-menu__item-description--Color);
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .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-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);
 }
 
 .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 +587,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 +617,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;
@@ -293,8 +292,8 @@
       --#{$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);
 
@@ -402,21 +401,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 +428,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 +460,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 +488,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 +517,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);
   }
 }
 
@@ -581,7 +583,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 +598,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 +637,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 +657,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);
@@ -667,39 +669,39 @@
 .#{$menu}__item-description {
   font-size: var(--#{$menu}__item-description--FontSize);
   color: var(--#{$menu}__item-description--Color);
-  word-break: break-all;
+  word-break: break-word;
 }
 
 // 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);
 }
 
 // Toggle icon
 .#{$menu}__item-toggle-icon {
-  padding-right: var(--#{$menu}__item-toggle-icon--PaddingRight);
-  padding-left: var(--#{$menu}__item-toggle-icon--PaddingLeft);
+  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 +710,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 +749,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);
   }
 }