@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

package/components/Drawer/drawer.scss

@@ -147,10 +147,19 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   // Box shadow
   --#{$drawer}__panel--BoxShadow: none;
-  --#{$drawer}--m-expanded__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-left);
-  --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-right);
   --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-top);
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
+    $ltr-val: var(--#{$pf-global}--BoxShadow--lg-left),
+    $rtl-val: var(--#{$pf-global}--BoxShadow--lg-right)
+  ); 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
+    $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
+    $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
+  ); 
+
   // Divider
   --#{$drawer}__panel--after--Width: var(--#{$pf-global}--BorderWidth--sm);
   --#{$drawer}--m-panel-bottom__panel--after--Height: var(--#{$pf-global}--BorderWidth--sm);
@@ -168,15 +177,20 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   &.pf-m-inline,
   &.pf-m-static {
     > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
-      padding-left: var(--#{$drawer}--m-inline__panel--PaddingLeft);
+      padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingLeft);
     }
   }
 
   &.pf-m-panel-left > .#{$drawer}__main {
     > .#{$drawer}__panel {
       order: 0;
-      margin-right: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-      transform: translateX(-100%);
+      margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
+
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(-100%),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+      ); 
     }
 
     > .#{$drawer}__content {
@@ -192,7 +206,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // stylelint-disable selector-max-class
   &.pf-m-expanded {
     > .#{$drawer}__main > .#{$drawer}__panel {
-      transform: translateX(-100%);
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(-100%),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+      ); 
     }
 
     &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -252,7 +270,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   z-index: var(--#{$drawer}__content--ZIndex);
   flex-basis: var(--#{$drawer}__content--FlexBasis);
   order: 0;
-  background-color: var(--#{$drawer}__content--BackgroundColor);
+
+  // background-color: var(--#{$drawer}__content--BackgroundColor);
 
   &.pf-m-no-background {
     --#{$drawer}__content--BackgroundColor: transparent;
@@ -263,7 +282,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   }
 
   > .#{$drawer}__body {
-    padding: var(--#{$drawer}__content--child--PaddingTop) var(--#{$drawer}__content--child--PaddingRight) var(--#{$drawer}__content--child--PaddingBottom) var(--#{$drawer}__content--child--PaddingLeft);
+    padding-block-start: var(--#{$drawer}__content--child--PaddingTop);
+    padding-block-end: var(--#{$drawer}__content--child--PaddingBottom);
+    padding-inline-start: var(--#{$drawer}__content--child--PaddingLeft);
+    padding-inline-end: var(--#{$drawer}__content--child--PaddingRight);
   }
 }
 
@@ -283,8 +305,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   &::after {
     position: absolute;
-    top: 0;
-    left: 0;
+   inset-block-start: 0;
+   inset-inline-start: 0;
     width: var(--#{$drawer}__panel--after--Width);
     height: 100%;
     content: "";
@@ -340,13 +362,16 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   grid-row: 1;
   grid-column: 2;
   align-self: baseline;
-  margin-top: var(--#{$drawer}__actions--MarginTop);
-  margin-right: var(--#{$drawer}__actions--MarginRight);
+  margin-block-start: var(--#{$drawer}__actions--MarginTop);
+  margin-inline-end: var(--#{$drawer}__actions--MarginRight);
 }
 
 // Modified content children
 .#{$drawer}__body {
-  padding: var(--#{$drawer}--child--PaddingTop) var(--#{$drawer}--child--PaddingRight) var(--#{$drawer}--child--PaddingBottom) var(--#{$drawer}--child--PaddingLeft);
+  padding-block-start: var(--#{$drawer}--child--PaddingTop);
+  padding-block-end: var(--#{$drawer}--child--PaddingBottom);
+  padding-inline-start: var(--#{$drawer}--child--PaddingLeft);
+  padding-inline-end: var(--#{$drawer}--child--PaddingRight);
 
   // No padding
   &.pf-m-no-padding {
@@ -354,18 +379,21 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
     > .#{$drawer}__actions,
     > .#{$drawer}__head > .#{$drawer}__actions {
-      margin-top: 0;
-      margin-right: 0;
+      margin-block-start: 0;
+      margin-inline-end: 0;
     }
   }
 
   // Padding
   &.pf-m-padding {
-    padding: var(--#{$drawer}--child--m-padding--PaddingTop) var(--#{$drawer}--child--m-padding--PaddingRight) var(--#{$drawer}--child--m-padding--PaddingBottom) var(--#{$drawer}--child--m-padding--PaddingLeft);
+    padding-block-start: var(--#{$drawer}--child--m-padding--PaddingTop);
+    padding-block-end: var(--#{$drawer}--child--m-padding--PaddingBottom);
+    padding-inline-start: var(--#{$drawer}--child--m-padding--PaddingLeft);
+    padding-inline-end: var(--#{$drawer}--child--m-padding--PaddingRight);
   }
 
   &:not(.pf-m-no-padding) + * {
-    padding-top: 0;
+    padding-block-start: 0;
   }
 
   &:last-child {
@@ -408,21 +436,30 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   &::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;
     content: "";
     border: solid var(--#{$drawer}__splitter--after--BorderColor);
-    border-width: var(--#{$drawer}__splitter--after--BorderTopWidth) var(--#{$drawer}__splitter--after--BorderRightWidth) var(--#{$drawer}__splitter--after--BorderBottomWidth) var(--#{$drawer}__splitter--after--BorderLeftWidth);
+    border-block-start-width: var(--#{$drawer}__splitter--after--BorderTopWidth);
+    border-block-end-width: var(--#{$drawer}__splitter--after--BorderBottomWidth);
+    border-inline-start-width: var(--#{$drawer}__splitter--after--BorderLeftWidth);
+    border-inline-end-width: var(--#{$drawer}__splitter--after--BorderRightWidth);
   }
 }
 
 .#{$drawer}__splitter-handle {
   position: absolute;
-  top: var(--#{$drawer}__splitter-handle--Top);
-  left: var(--#{$drawer}__splitter-handle--Left);
-  transform: translate(-50%, -50%);
+  inset-block-start: var(--#{$drawer}__splitter-handle--Top);
+  inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translate(-50%, -50%),
+    $rtl-val: translate(#{pf-v5-calc-inverse(-50%)}, -50%),
+  ); 
+
 
   &::after {
     display: block;
@@ -431,7 +468,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     content: "";
     border-color: var(--#{$drawer}__splitter-handle--after--BorderColor);
     border-style: solid;
-    border-width: var(--#{$drawer}__splitter-handle--after--BorderTopWidth) var(--#{$drawer}__splitter-handle--after--BorderRightWidth) var(--#{$drawer}__splitter-handle--after--BorderBottomWidth) var(--#{$drawer}__splitter-handle--after--BorderLeftWidth);
+    border-block-start-width: var(--#{$drawer}__splitter-handle--after--BorderTopWidth);
+    border-block-end-width: var(--#{$drawer}__splitter-handle--after--BorderBottomWidth);
+    border-inline-start-width: var(--#{$drawer}__splitter-handle--after--BorderLeftWidth);
+    border-inline-end-width: var(--#{$drawer}__splitter-handle--after--BorderRightWidth);
   }
 }
 
@@ -477,8 +517,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     &.pf-m-inline,
     &.pf-m-static {
       > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
-        padding-right: var(--#{$drawer}--m-panel-left--m-inline__panel--PaddingRight);
-        padding-left: 0;
+        padding-inline-start: 0;
+        padding-inline-end: var(--#{$drawer}--m-panel-left--m-inline__panel--PaddingRight);
       }
     }
 
@@ -487,8 +527,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     }
 
     > .#{$drawer}__main > .#{$drawer}__panel::after {
-      right: 0;
-      left: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
     }
 
     > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable {
@@ -513,14 +553,14 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     &.pf-m-inline,
     &.pf-m-static {
       > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
-        padding-top: var(--#{$drawer}--m-panel-bottom--m-inline__panel--PaddingTop);
-        padding-left: 0;
+        padding-block-start: var(--#{$drawer}--m-panel-bottom--m-inline__panel--PaddingTop);
+        padding-inline-start: 0;
       }
     }
 
     > .#{$drawer}__main > .#{$drawer}__panel::after {
-      top: 0;
-      left: auto;
+     inset-block-start: 0;
+     inset-inline-start: auto;
       width: 100%;
       height: var(--#{$drawer}--m-panel-bottom__panel--after--Height);
     }
@@ -626,14 +666,19 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       }
 
       > .#{$drawer}__main > .#{$drawer}__panel {
-        margin-left: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-        transform: translateX(100%);
+        margin-inline-start: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
+
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(100%)}),
+        ); 
       }
 
       // stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors
       // Inline, expanded
       &.pf-m-expanded > .#{$drawer}__main > .#{$drawer}__panel {
-        margin-left: 0;
+        margin-inline-start: 0;
         transform: translateX(0);
       }
 
@@ -644,14 +689,19 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       // Panel left
       &.pf-m-panel-left {
         > .#{$drawer}__main > .#{$drawer}__panel {
-          margin-right: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-          margin-left: 0;
-          transform: translateX(-100%);
+          margin-inline-start: 0;
+          margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
+
+          @include pf-v5-bidirectional-style(
+            $prop: transform,
+            $ltr-val: translateX(-100%),
+            $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+          ); 
         }
 
         // Inline, expanded, panel left
         &.pf-m-expanded > .#{$drawer}__main > .#{$drawer}__panel {
-          margin-right: 0;
+          margin-inline-end: 0;
           transform: translateX(0);
         }
 
@@ -663,13 +713,13 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       // Panel bottom
       &.pf-m-panel-bottom {
         > .#{$drawer}__main > .#{$drawer}__panel {
-          margin-bottom: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
+          margin-block-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
           transform: translateY(100%);
         }
 
         // Inline, expanded, panel left
         &.pf-m-expanded > .#{$drawer}__main > .#{$drawer}__panel {
-          margin-bottom: 0;
+          margin-block-end: 0;
           transform: translateY(0);
         }
       }
@@ -685,7 +735,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       // stylelint-disable max-nesting-depth, selector-max-class, selector-max-combinators, selector-max-compound-selectors
       &.pf-m-panel-left {
         > .#{$drawer}__main > .#{$drawer}__panel {
-          margin-right: 0;
+          margin-inline-end: 0;
           transform: translateX(0);
         }
       }

package/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;
@@ -273,21 +279,19 @@
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
+  --pf-v5-c-check__input--TranslateY: none;
   align-self: revert;
   width: auto;
   cursor: pointer;
   visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
 }
-.pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check__input {
-  -moz-transform: none;
-}
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
   color: var(--pf-v5-c-dropdown__toggle-button--Color);
   background-color: var(--pf-v5-c-dropdown__toggle-button--BackgroundColor);
   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 +311,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 +426,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 +459,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 +481,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 +490,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 +501,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 +515,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 +584,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 +618,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 +637,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 +650,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);