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

package/css/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(.ws-dir-rtl, .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(.ws-dir-rtl, .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);
@@ -548,35 +559,38 @@ 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);
 }
+:where(.ws-dir-rtl, .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 +598,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 +628,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/css/components/Menu/menu.d.ts

@@ -1,6 +1,7 @@
 import './menu.css';
 declare const _default: {
   "breadcrumb": "pf-v5-c-breadcrumb",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuBreadcrumb": "pf-v5-c-menu__breadcrumb",
@@ -55,6 +56,7 @@ declare const _default: {
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Menu/menu.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./menu.css');
 exports.default = {
   "breadcrumb": "pf-v5-c-breadcrumb",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuBreadcrumb": "pf-v5-c-menu__breadcrumb",
@@ -57,5 +58,6 @@ exports.default = {
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Menu/menu.mjs

@@ -1,6 +1,7 @@
 import './menu.css';
 export default {
   "breadcrumb": "pf-v5-c-breadcrumb",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuBreadcrumb": "pf-v5-c-menu__breadcrumb",
@@ -55,5 +56,6 @@ export default {
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/MenuToggle/menu-toggle.css

@@ -121,7 +121,10 @@
   display: inline-flex;
   align-items: center;
   max-width: 100%;
-  padding: var(--pf-v5-c-menu-toggle--PaddingTop) var(--pf-v5-c-menu-toggle--PaddingRight) var(--pf-v5-c-menu-toggle--PaddingBottom) var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu-toggle--PaddingRight);
   font-size: var(--pf-v5-c-menu-toggle--FontSize);
   line-height: var(--pf-v5-c-menu-toggle--LineHeight);
   color: var(--pf-v5-c-menu-toggle--Color);
@@ -132,20 +135,26 @@
 }
 .pf-v5-c-menu-toggle::before, .pf-v5-c-menu-toggle::after {
   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: "";
 }
 .pf-v5-c-menu-toggle::before {
-  border-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor) var(--pf-v5-c-menu-toggle--before--BorderRightColor) var(--pf-v5-c-menu-toggle--before--BorderBottomColor) var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
   border-style: solid;
-  border-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth) var(--pf-v5-c-menu-toggle--before--BorderRightWidth) var(--pf-v5-c-menu-toggle--before--BorderBottomWidth) var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
+  border-block-start-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor);
+  border-block-start-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth);
+  border-block-end-color: var(--pf-v5-c-menu-toggle--before--BorderBottomColor);
+  border-block-end-width: var(--pf-v5-c-menu-toggle--before--BorderBottomWidth);
+  border-inline-start-color: var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
+  border-inline-start-width: var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
+  border-inline-end-color: var(--pf-v5-c-menu-toggle--before--BorderRightColor);
+  border-inline-end-width: var(--pf-v5-c-menu-toggle--before--BorderRightWidth);
 }
 .pf-v5-c-menu-toggle::after {
-  border-bottom: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
 }
 .pf-v5-c-menu-toggle.pf-m-primary {
   --pf-v5-c-menu-toggle--BorderRadius: var(--pf-v5-c-menu-toggle--m-primary--BorderRadius);
@@ -267,13 +276,16 @@
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > * {
   position: relative;
-  padding: var(--pf-v5-c-menu-toggle--PaddingTop) var(--pf-v5-c-menu-toggle--PaddingRight) var(--pf-v5-c-menu-toggle--PaddingBottom) var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-menu-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-menu-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-menu-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu-toggle--PaddingRight);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > *:first-child {
-  padding-right: var(--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight);
+  padding-inline-end: var(--pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button:where(:not(.pf-m-action)) > :last-child {
-  padding-left: var(--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check {
   --pf-v5-c-menu-toggle--PaddingRight: 0;
@@ -288,13 +300,13 @@
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left);
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left);
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *:hover {
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth);
@@ -334,16 +346,16 @@
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :first-child, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :first-child {
-  border-top-left-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
-  border-bottom-left-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-start-start-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-end-start-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :last-child, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary > :last-child {
-  border-top-right-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
-  border-bottom-right-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-start-end-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+  border-end-end-radius: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--after--Left: calc(var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) * -1);
-  border-left: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:not(.pf-m-expanded) {
   --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
@@ -372,8 +384,8 @@
   --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
   --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
   align-self: var(--pf-v5-c-menu-toggle__button--AlignSelf);
-  padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
-  padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-menu-toggle__button--PaddingRight);
   color: inherit;
   background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
   border: 0;
@@ -382,7 +394,7 @@
 .pf-v5-c-menu-toggle__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-right: var(--pf-v5-c-menu-toggle__icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-menu-toggle__icon--MarginRight);
   line-height: 1;
 }
 
@@ -396,17 +408,17 @@
 .pf-v5-c-menu-toggle__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-left: var(--pf-v5-c-menu-toggle__count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-menu-toggle__count--MarginLeft);
 }
 
 .pf-v5-c-menu-toggle__controls {
-  padding-left: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
-  margin-right: var(--pf-v5-c-menu-toggle__controls--MarginRight);
-  margin-left: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-menu-toggle__controls--PaddingLeft);
+  margin-inline-start: var(--pf-v5-c-menu-toggle__controls--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-menu-toggle__controls--MarginRight);
 }
 
 .pf-v5-c-menu-toggle__toggle-icon {
-  margin-right: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
   color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
 }
 

package/css/components/ModalBox/modal-box.css

@@ -68,7 +68,7 @@
   --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
 }
 .pf-v5-c-modal-box.pf-m-align-top {
-  top: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
+  inset-block-start: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
   align-self: flex-start;
   max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
   max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
@@ -91,27 +91,27 @@
 
 .pf-v5-c-modal-box__close {
   position: absolute;
-  top: var(--pf-v5-c-modal-box__close--Top);
-  right: var(--pf-v5-c-modal-box__close--Right);
+  inset-block-start: var(--pf-v5-c-modal-box__close--Top);
+  inset-inline-end: var(--pf-v5-c-modal-box__close--Right);
 }
 .pf-v5-c-modal-box__close + * {
-  margin-right: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
 }
 
 .pf-v5-c-modal-box__header {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  padding-top: var(--pf-v5-c-modal-box__header--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__header--PaddingRight);
-  padding-left: var(--pf-v5-c-modal-box__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__header--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-modal-box__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__header--PaddingRight);
 }
 .pf-v5-c-modal-box__header.pf-m-help {
   display: flex;
   flex-direction: row;
 }
 .pf-v5-c-modal-box__header:last-child {
-  padding-bottom: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
 }
 .pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
   --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
@@ -140,20 +140,20 @@
 }
 
 .pf-v5-c-modal-box__title-icon {
-  margin-right: var(--pf-v5-c-modal-box__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__title-icon--MarginRight);
   color: var(--pf-v5-c-modal-box__title-icon--Color);
 }
 
 .pf-v5-c-modal-box__description {
-  padding-top: var(--pf-v5-c-modal-box__description--PaddingTop);
+  padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
 }
 
 .pf-v5-c-modal-box__body {
   flex: 1 1 auto;
   min-height: var(--pf-v5-c-modal-box__body--MinHeight);
-  padding-top: var(--pf-v5-c-modal-box__body--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__body--PaddingRight);
-  padding-left: var(--pf-v5-c-modal-box__body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-modal-box__body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__body--PaddingRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -161,20 +161,20 @@
   -webkit-overflow-scrolling: touch;
 }
 .pf-v5-c-modal-box__body:last-child {
-  padding-bottom: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
 }
 
 .pf-v5-c-modal-box__footer {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-top: var(--pf-v5-c-modal-box__footer--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__footer--PaddingRight);
-  padding-bottom: var(--pf-v5-c-modal-box__footer--PaddingBottom);
-  padding-left: var(--pf-v5-c-modal-box__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-modal-box__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-modal-box__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__footer--PaddingRight);
 }
 .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
-  margin-right: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {