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

package/css/components/Dropdown/dropdown.css

@@ -147,19 +147,19 @@
   --pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
   position: relative;
   display: inline-flex;
-  align-items: start;
+  align-items: flex-start;
   max-width: 100%;
 }
 .pf-v5-c-dropdown .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-dropdown--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-dropdown--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-dropdown--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-dropdown--c-divider--MarginBottom);
 }
 .pf-v5-c-dropdown .pf-v5-c-divider:last-child {
   --pf-v5-c-dropdown--c-divider--MarginBottom: 0;
 }
 .pf-v5-c-dropdown > .pf-v5-c-menu {
   position: absolute;
-  top: var(--pf-v5-c-dropdown--c-menu--Top);
+  inset-block-start: var(--pf-v5-c-dropdown--c-menu--Top);
   z-index: var(--pf-v5-c-dropdown--c-menu--ZIndex);
 }
 .pf-v5-c-dropdown.pf-m-full-height {
@@ -176,10 +176,10 @@
   align-self: stretch;
 }
 .pf-v5-c-dropdown.pf-m-full-height .pf-v5-c-dropdown__toggle::before {
-  border-top-width: var(--pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
+  border-block-start-width: var(--pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
 }
 .pf-v5-c-dropdown.pf-m-full-height:hover .pf-v5-c-dropdown__toggle::before {
-  border-bottom-width: var(--pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
 }
 .pf-v5-c-dropdown.pf-m-expanded {
   --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
@@ -193,7 +193,10 @@
   align-items: center;
   min-width: var(--pf-v5-c-dropdown__toggle--MinWidth);
   max-width: 100%;
-  padding: var(--pf-v5-c-dropdown__toggle--PaddingTop) var(--pf-v5-c-dropdown__toggle--PaddingRight) var(--pf-v5-c-dropdown__toggle--PaddingBottom) var(--pf-v5-c-dropdown__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-dropdown__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dropdown__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-dropdown__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dropdown__toggle--PaddingRight);
   font-size: var(--pf-v5-c-dropdown__toggle--FontSize);
   font-weight: var(--pf-v5-c-dropdown__toggle--FontWeight);
   line-height: var(--pf-v5-c-dropdown__toggle--LineHeight);
@@ -203,13 +206,16 @@
 }
 .pf-v5-c-dropdown__toggle::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button::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;
   content: "";
   border: var(--pf-v5-c-dropdown__toggle--before--BorderWidth) solid;
-  border-color: var(--pf-v5-c-dropdown__toggle--before--BorderTopColor) var(--pf-v5-c-dropdown__toggle--before--BorderRightColor) var(--pf-v5-c-dropdown__toggle--before--BorderBottomColor) var(--pf-v5-c-dropdown__toggle--before--BorderLeftColor);
+  border-block-start-color: var(--pf-v5-c-dropdown__toggle--before--BorderTopColor);
+  border-block-end-color: var(--pf-v5-c-dropdown__toggle--before--BorderBottomColor);
+  border-inline-start-color: var(--pf-v5-c-dropdown__toggle--before--BorderLeftColor);
+  border-inline-end-color: var(--pf-v5-c-dropdown__toggle--before--BorderRightColor);
 }
 .pf-v5-c-dropdown__toggle.pf-m-disabled, .pf-v5-c-dropdown__toggle:disabled {
   --pf-v5-c-dropdown__toggle--m-primary--Color: var(--pf-v5-c-dropdown__toggle--m-primary--disabled--Color);
@@ -231,10 +237,10 @@
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button > * {
   position: relative;
-  padding-top: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop);
-  padding-right: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight);
-  padding-bottom: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom);
-  padding-left: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight);
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button > *:first-child {
   --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
@@ -247,16 +253,16 @@
   --pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft);
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button {
-  margin-right: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);
+  margin-inline-end: var(--pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
-  border-left: 0;
+  border-inline-start: 0;
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button:last-child {
   --pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
-  border-left: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
   --pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
@@ -287,7 +293,7 @@
   border: 0;
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-text {
-  margin-left: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
 }
 .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
   --pf-v5-c-dropdown__toggle--before--BorderWidth: 0;
@@ -307,27 +313,27 @@
   --pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
 }
 .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
-  border-top-left-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
-  border-bottom-left-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+  border-start-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+  border-end-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
 }
 .pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
-  border-top-right-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
-  border-bottom-right-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+  border-start-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+  border-end-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
 }
 .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:hover::before {
   --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--hover--before--BorderBottomColor);
 }
 .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:focus::before {
   --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth);
 }
 .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:active::before {
   --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth);
 }
 .pf-m-expanded > .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button::before {
   --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
 }
 .pf-v5-c-dropdown__toggle.pf-m-plain {
   --pf-v5-c-dropdown__toggle-icon--Color: var(--pf-v5-c-dropdown--m-plain__toggle-icon--Color);
@@ -422,18 +428,18 @@
   --pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
 }
 .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
-  border-top-left-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
-  border-bottom-left-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-start-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-end-start-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
 }
 .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
-  border-top-right-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
-  border-bottom-right-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-start-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-end-end-radius: var(--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius);
 }
 .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
-  border-left: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+  border-inline-start: var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
 }
 .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
-  border-right: 0;
+  border-inline-end: 0;
 }
 .pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
   border: 0;
@@ -455,13 +461,13 @@
 
 .pf-v5-c-dropdown__toggle-text {
   flex: 1 1 auto;
-  text-align: left;
+  text-align: start;
 }
 
 .pf-v5-c-dropdown__toggle-icon {
-  padding-right: var(--pf-v5-c-dropdown__toggle-icon--PaddingRight);
-  padding-left: var(--pf-v5-c-dropdown__toggle-icon--PaddingLeft);
-  margin-left: var(--pf-v5-c-dropdown__toggle-icon--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-dropdown__toggle-icon--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dropdown__toggle-icon--PaddingRight);
+  margin-inline-start: var(--pf-v5-c-dropdown__toggle-icon--MarginLeft);
   line-height: var(--pf-v5-c-dropdown__toggle-icon--LineHeight);
   color: var(--pf-v5-c-dropdown__toggle-icon--Color, inherit);
 }
@@ -477,7 +483,7 @@
 
 .pf-v5-c-dropdown__toggle-progress {
   position: absolute;
-  left: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
+  inset-inline-start: var(--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft);
   visibility: var(--pf-v5-c-dropdown__toggle-progress--Visibility);
 }
 .pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner {
@@ -486,10 +492,10 @@
 
 .pf-v5-c-dropdown__menu {
   position: absolute;
-  top: var(--pf-v5-c-dropdown__menu--Top);
+  inset-block-start: var(--pf-v5-c-dropdown__menu--Top);
   z-index: var(--pf-v5-c-dropdown__menu--ZIndex);
-  padding-top: var(--pf-v5-c-dropdown__menu--PaddingTop);
-  padding-bottom: var(--pf-v5-c-dropdown__menu--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-dropdown__menu--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dropdown__menu--PaddingBottom);
   background: var(--pf-v5-c-dropdown__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v5-c-dropdown__menu--BoxShadow);
@@ -497,10 +503,10 @@
 .pf-v5-c-dropdown__menu.pf-m-static {
   --pf-v5-c-dropdown--m-top__menu--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -511,60 +517,60 @@
 }
 .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
 .pf-v5-c-dropdown__menu.pf-m-align-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left,
 .pf-v5-c-dropdown__menu.pf-m-align-left {
-  right: auto;
+  inset-inline-end: auto;
 }
 @media (min-width: 576px) {
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-sm,
   .pf-v5-c-dropdown__menu.pf-m-align-right-on-sm {
-    right: 0;
+    inset-inline-end: 0;
   }
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-sm,
   .pf-v5-c-dropdown__menu.pf-m-align-left-on-sm {
-    right: auto;
+    inset-inline-end: auto;
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-md,
   .pf-v5-c-dropdown__menu.pf-m-align-right-on-md {
-    right: 0;
+    inset-inline-end: 0;
   }
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-md,
   .pf-v5-c-dropdown__menu.pf-m-align-left-on-md {
-    right: auto;
+    inset-inline-end: auto;
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-lg,
   .pf-v5-c-dropdown__menu.pf-m-align-right-on-lg {
-    right: 0;
+    inset-inline-end: 0;
   }
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-lg,
   .pf-v5-c-dropdown__menu.pf-m-align-left-on-lg {
-    right: auto;
+    inset-inline-end: auto;
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-xl,
   .pf-v5-c-dropdown__menu.pf-m-align-right-on-xl {
-    right: 0;
+    inset-inline-end: 0;
   }
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-xl,
   .pf-v5-c-dropdown__menu.pf-m-align-left-on-xl {
-    right: auto;
+    inset-inline-end: auto;
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right-on-2xl,
   .pf-v5-c-dropdown__menu.pf-m-align-right-on-2xl {
-    right: 0;
+    inset-inline-end: 0;
   }
   .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left-on-2xl,
   .pf-v5-c-dropdown__menu.pf-m-align-left-on-2xl {
-    right: auto;
+    inset-inline-end: auto;
   }
 }
 
@@ -580,12 +586,15 @@
 .pf-v5-c-dropdown__menu-item {
   display: block;
   width: 100%;
-  padding: var(--pf-v5-c-dropdown__menu-item--PaddingTop) var(--pf-v5-c-dropdown__menu-item--PaddingRight) var(--pf-v5-c-dropdown__menu-item--PaddingBottom) var(--pf-v5-c-dropdown__menu-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-dropdown__menu-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dropdown__menu-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-dropdown__menu-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dropdown__menu-item--PaddingRight);
   font-size: var(--pf-v5-c-dropdown__menu-item--FontSize);
   font-weight: var(--pf-v5-c-dropdown__menu-item--FontWeight);
   line-height: var(--pf-v5-c-dropdown__menu-item--LineHeight);
   color: var(--pf-v5-c-dropdown__menu-item--Color);
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   background-color: var(--pf-v5-c-dropdown__menu-item--BackgroundColor);
   border: none;
@@ -611,7 +620,7 @@
 }
 .pf-v5-c-dropdown__menu-item.pf-m-icon.pf-m-description {
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
 }
 .pf-v5-c-dropdown__menu-item.pf-m-icon .pf-v5-c-dropdown__menu-item-main {
   display: flex;
@@ -630,7 +639,7 @@
   justify-content: center;
   width: var(--pf-v5-c-dropdown__menu-item-icon--Width);
   height: var(--pf-v5-c-dropdown__menu-item-icon--Height);
-  margin-right: var(--pf-v5-c-dropdown__menu-item-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-dropdown__menu-item-icon--MarginRight);
 }
 .pf-v5-c-dropdown__menu-item-icon > * {
   max-width: 100%;
@@ -643,14 +652,14 @@
 }
 
 .pf-v5-c-dropdown__group + .pf-v5-c-dropdown__group {
-  padding-top: var(--pf-v5-c-dropdown__group--group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-dropdown__group--group--PaddingTop);
 }
 
 .pf-v5-c-dropdown__group-title {
-  padding-top: var(--pf-v5-c-dropdown__group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-dropdown__group-title--PaddingRight);
-  padding-bottom: var(--pf-v5-c-dropdown__group-title--PaddingBottom);
-  padding-left: var(--pf-v5-c-dropdown__group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-dropdown__group-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dropdown__group-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-dropdown__group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dropdown__group-title--PaddingRight);
   font-size: var(--pf-v5-c-dropdown__group-title--FontSize);
   font-weight: var(--pf-v5-c-dropdown__group-title--FontWeight);
   color: var(--pf-v5-c-dropdown__group-title--Color);

package/css/components/DualListSelector/dual-list-selector.css

@@ -76,7 +76,7 @@
 
 .pf-v5-c-dual-list-selector__header {
   grid-area: var(--pf-v5-c-dual-list-selector__header--GridArea);
-  margin-bottom: var(--pf-v5-c-dual-list-selector__header--MarginBottom);
+  margin-block-end: var(--pf-v5-c-dual-list-selector__header--MarginBottom);
 }
 
 .pf-v5-c-dual-list-selector__title-text {
@@ -86,7 +86,7 @@
 .pf-v5-c-dual-list-selector__tools {
   display: flex;
   grid-area: var(--pf-v5-c-dual-list-selector__tools--GridArea);
-  margin-bottom: var(--pf-v5-c-dual-list-selector__tools--MarginBottom);
+  margin-block-end: var(--pf-v5-c-dual-list-selector__tools--MarginBottom);
 }
 
 .pf-v5-c-dual-list-selector__tools-filter {
@@ -97,13 +97,13 @@
   display: flex;
 }
 .pf-v5-c-dual-list-selector__tools-filter ~ .pf-v5-c-dual-list-selector__tools-actions {
-  margin-left: var(--pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft);
 }
 
 .pf-v5-c-dual-list-selector__status {
   display: flex;
   grid-area: var(--pf-v5-c-dual-list-selector__status--GridArea);
-  margin-bottom: var(--pf-v5-c-dual-list-selector__status--MarginBottom);
+  margin-block-end: var(--pf-v5-c-dual-list-selector__status--MarginBottom);
 }
 
 .pf-v5-c-dual-list-selector__status-text {
@@ -130,11 +130,15 @@
   --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
 }
 .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
-  position: absolute;
-  top: 0;
-  left: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
   transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
+  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
+
 .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
 }
@@ -204,12 +208,15 @@
 .pf-v5-c-dual-list-selector__item {
   position: relative;
   width: 100%;
-  padding: var(--pf-v5-c-dual-list-selector__item--PaddingTop) var(--pf-v5-c-dual-list-selector__item--PaddingRight) var(--pf-v5-c-dual-list-selector__item--PaddingBottom) var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-dual-list-selector__item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dual-list-selector__item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dual-list-selector__item--PaddingRight);
   cursor: pointer;
 }
 
 .pf-v5-c-dual-list-selector__item-count {
-  margin-left: var(--pf-v5-c-dual-list-selector__item-count--Marginleft);
+  margin-inline-start: var(--pf-v5-c-dual-list-selector__item-count--Marginleft);
 }
 .pf-v5-c-dual-list-selector__item-count .pf-v5-c-badge.pf-m-read {
   --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor);
@@ -226,8 +233,12 @@
 .pf-v5-c-dual-list-selector__controls {
   grid-area: var(--pf-v5-c-dual-list-selector__controls--GridArea);
   align-self: center;
-  padding-right: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
-  padding-left: var(--pf-v5-c-dual-list-selector__controls--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-dual-list-selector__controls--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
+  scale: -1 1;
 }
 
 .pf-v5-c-dual-list-selector__item-main {
@@ -236,15 +247,18 @@
 }
 
 .pf-v5-c-dual-list-selector__item-toggle {
-  padding: var(--pf-v5-c-dual-list-selector__item-toggle--PaddingTop) var(--pf-v5-c-dual-list-selector__item-toggle--PaddingRight) var(--pf-v5-c-dual-list-selector__item-toggle--PaddingBottom) var(--pf-v5-c-dual-list-selector__item-toggle--PaddingLeft);
-  margin-top: var(--pf-v5-c-dual-list-selector__item-toggle--MarginTop);
-  margin-bottom: var(--pf-v5-c-dual-list-selector__item-toggle--MarginBottom);
+  padding-block-start: var(--pf-v5-c-dual-list-selector__item-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-dual-list-selector__item-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-dual-list-selector__item-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-dual-list-selector__item-toggle--PaddingRight);
+  margin-block-start: var(--pf-v5-c-dual-list-selector__item-toggle--MarginTop);
+  margin-block-end: var(--pf-v5-c-dual-list-selector__item-toggle--MarginBottom);
 }
 
 .pf-v5-c-dual-list-selector__item-check {
   display: flex;
   align-items: center;
-  margin-right: var(--pf-v5-c-dual-list-selector__item-check--MarginRight);
+  margin-inline-end: var(--pf-v5-c-dual-list-selector__item-check--MarginRight);
 }
 
 .pf-v5-c-dual-list-selector__item-toggle-icon {

package/css/components/DualListSelector/dual-list-selector.d.ts

@@ -2,8 +2,10 @@ import './dual-list-selector.css';
 declare const _default: {
   "badge": "pf-v5-c-badge",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dualListSelector": "pf-v5-c-dual-list-selector",
   "dualListSelectorControls": "pf-v5-c-dual-list-selector__controls",
+  "dualListSelectorControlsItem": "pf-v5-c-dual-list-selector__controls-item",
   "dualListSelectorDraggable": "pf-v5-c-dual-list-selector__draggable",
   "dualListSelectorHeader": "pf-v5-c-dual-list-selector__header",
   "dualListSelectorItem": "pf-v5-c-dual-list-selector__item",
@@ -36,6 +38,7 @@ declare const _default: {
     "ghostRow": "pf-m-ghost-row",
     "read": "pf-m-read"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/DualListSelector/dual-list-selector.js

@@ -4,8 +4,10 @@ require('./dual-list-selector.css');
 exports.default = {
   "badge": "pf-v5-c-badge",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dualListSelector": "pf-v5-c-dual-list-selector",
   "dualListSelectorControls": "pf-v5-c-dual-list-selector__controls",
+  "dualListSelectorControlsItem": "pf-v5-c-dual-list-selector__controls-item",
   "dualListSelectorDraggable": "pf-v5-c-dual-list-selector__draggable",
   "dualListSelectorHeader": "pf-v5-c-dual-list-selector__header",
   "dualListSelectorItem": "pf-v5-c-dual-list-selector__item",
@@ -38,5 +40,6 @@ exports.default = {
     "ghostRow": "pf-m-ghost-row",
     "read": "pf-m-read"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/DualListSelector/dual-list-selector.mjs

@@ -2,8 +2,10 @@ import './dual-list-selector.css';
 export default {
   "badge": "pf-v5-c-badge",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dualListSelector": "pf-v5-c-dual-list-selector",
   "dualListSelectorControls": "pf-v5-c-dual-list-selector__controls",
+  "dualListSelectorControlsItem": "pf-v5-c-dual-list-selector__controls-item",
   "dualListSelectorDraggable": "pf-v5-c-dual-list-selector__draggable",
   "dualListSelectorHeader": "pf-v5-c-dual-list-selector__header",
   "dualListSelectorItem": "pf-v5-c-dual-list-selector__item",
@@ -36,5 +38,6 @@ export default {
     "ghostRow": "pf-m-ghost-row",
     "read": "pf-m-read"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/EmptyState/empty-state.css

@@ -39,7 +39,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--pf-v5-c-empty-state--PaddingTop) var(--pf-v5-c-empty-state--PaddingRight) var(--pf-v5-c-empty-state--PaddingBottom) var(--pf-v5-c-empty-state--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-empty-state--PaddingTop);
+  padding-block-end: var(--pf-v5-c-empty-state--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-empty-state--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-empty-state--PaddingRight);
   text-align: center;
 }
 .pf-v5-c-empty-state.pf-m-xs {
@@ -77,7 +80,7 @@
 }
 
 .pf-v5-c-empty-state__icon {
-  margin-bottom: var(--pf-v5-c-empty-state__icon--MarginBottom);
+  margin-block-end: var(--pf-v5-c-empty-state__icon--MarginBottom);
   font-size: var(--pf-v5-c-empty-state__icon--FontSize);
   line-height: 1;
   color: var(--pf-v5-c-empty-state__icon--Color);
@@ -91,7 +94,7 @@
 }
 
 .pf-v5-c-empty-state__body {
-  margin-top: var(--pf-v5-c-empty-state__body--MarginTop);
+  margin-block-start: var(--pf-v5-c-empty-state__body--MarginTop);
   font-size: var(--pf-v5-c-empty-state--body--FontSize);
   color: var(--pf-v5-c-empty-state__body--Color);
 }
@@ -101,7 +104,7 @@
   flex-direction: column;
   row-gap: var(--pf-v5-c-empty-state__footer--RowGap);
   align-items: center;
-  margin-top: var(--pf-v5-c-empty-state__footer--MarginTop);
+  margin-block-start: var(--pf-v5-c-empty-state__footer--MarginTop);
 }
 
 .pf-v5-c-empty-state__actions {

package/css/components/ExpandableSection/expandable-section.css

@@ -63,9 +63,9 @@
 }
 .pf-v5-c-expandable-section.pf-m-display-lg::after {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
   content: "";
   background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
@@ -92,8 +92,11 @@
 
 .pf-v5-c-expandable-section__toggle {
   display: flex;
-  padding: var(--pf-v5-c-expandable-section__toggle--PaddingTop) var(--pf-v5-c-expandable-section__toggle--PaddingRight) var(--pf-v5-c-expandable-section__toggle--PaddingBottom) var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
-  margin-top: var(--pf-v5-c-expandable-section__toggle--MarginTop);
+  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
+  margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
   color: var(--pf-v5-c-expandable-section__toggle--Color);
   background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
   border: none;
@@ -114,18 +117,22 @@
   transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }
 
 .pf-v5-c-expandable-section__toggle-text {
-  margin-left: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
 }
 
 .pf-v5-c-expandable-section__content {
   max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
-  padding-right: var(--pf-v5-c-expandable-section__content--PaddingRight);
-  padding-bottom: var(--pf-v5-c-expandable-section__content--PaddingBottom);
-  padding-left: var(--pf-v5-c-expandable-section__content--PaddingLeft);
-  margin-top: var(--pf-v5-c-expandable-section__content--MarginTop);
+  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
+  margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
 }

package/css/components/ExpandableSection/expandable-section.d.ts

@@ -1,5 +1,6 @@
 import './expandable-section.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "expandableSection": "pf-v5-c-expandable-section",
   "expandableSectionContent": "pf-v5-c-expandable-section__content",
   "expandableSectionToggle": "pf-v5-c-expandable-section__toggle",
@@ -14,6 +15,7 @@ declare const _default: {
     "indented": "pf-m-indented",
     "active": "pf-m-active",
     "expandTop": "pf-m-expand-top"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/ExpandableSection/expandable-section.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./expandable-section.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "expandableSection": "pf-v5-c-expandable-section",
   "expandableSectionContent": "pf-v5-c-expandable-section__content",
   "expandableSectionToggle": "pf-v5-c-expandable-section__toggle",
@@ -16,5 +17,6 @@ exports.default = {
     "indented": "pf-m-indented",
     "active": "pf-m-active",
     "expandTop": "pf-m-expand-top"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };