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

package/components/DragDrop/drag-drop.css

@@ -1,11 +1,15 @@
-.pf-v5-c-draggable {
+:where(:root), :where(.pf-v5-c-draggable) {
   --pf-v5-c-draggable--Cursor: auto;
   --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
-  --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
-  --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
+
+.pf-v5-c-draggable {
   cursor: var(--pf-v5-c-draggable--Cursor);
 }
 .pf-v5-c-draggable.pf-m-dragging {
@@ -16,35 +20,38 @@
 }
 .pf-v5-c-draggable.pf-m-dragging::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: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
+  border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
 }
 .pf-v5-c-draggable.pf-m-drag-outside {
   --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
   --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
 }
 
-.pf-v5-c-droppable {
+:where(:root), :where(.pf-v5-c-droppable) {
   --pf-v5-c-droppable--before--BackgroundColor: transparent;
   --pf-v5-c-droppable--before--Opacity: 0;
   --pf-v5-c-droppable--after--BorderWidth: 0;
   --pf-v5-c-droppable--after--BorderColor: transparent;
-  --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
+  --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
-  --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
 }
+
 .pf-v5-c-droppable::before, .pf-v5-c-droppable::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: "";
 }
@@ -54,6 +61,7 @@
 }
 .pf-v5-c-droppable::after {
   border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
+  border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
 }
 .pf-v5-c-droppable.pf-m-dragging {
   --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -64,8 +72,4 @@
 }
 .pf-v5-c-droppable.pf-m-drag-outside {
   --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-droppable {
-  --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
 }

package/components/DragDrop/drag-drop.scss

@@ -1,14 +1,17 @@
 // @debug $draggable; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$draggable} {
+:where(:root), :where(.#{$draggable}) {
   --#{$draggable}--Cursor: auto;
   --#{$draggable}--m-dragging--Cursor: grabbing;
-  --#{$draggable}--m-dragging--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$draggable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$draggable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$draggable}--m-drag-outside--Cursor: not-allowed;
-  --#{$draggable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$draggable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
 
+.#{$draggable} {
   cursor: var(--#{$draggable}--Cursor);
 
   &.pf-m-dragging {
@@ -20,12 +23,13 @@
 
     &::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: var(--#{$draggable}--m-dragging--after--BorderWidth) solid var(--#{$draggable}--m-dragging--after--BorderColor);
+      border-radius: var(--#{$draggable}--m-dragging--after--BorderRadius);
     }
   }
 
@@ -35,24 +39,27 @@
   }
 }
 
-.#{$droppable} {
+:where(:root), :where(.#{$droppable}) {
   --#{$droppable}--before--BackgroundColor: transparent;
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;
   --#{$droppable}--after--BorderColor: transparent;
-  --#{$droppable}--m-dragging--before--BackgroundColor: var(--#{$pf-global}--palette--white);
+  --#{$droppable}--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$droppable}--m-dragging--before--Opacity: .6;
-  --#{$droppable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$droppable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
-  --#{$droppable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$droppable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$droppable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$droppable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$droppable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
 
+.#{$droppable} {
   &::before,
   &::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: "";
   }
@@ -64,6 +71,7 @@
 
   &::after {
     border: var(--#{$droppable}--after--BorderWidth, 0) solid var(--#{$droppable}--after--BorderColor, transparent);
+    border-radius: var(--#{$droppable}--m-dragging--after--BorderRadius);
   }
 
   &.pf-m-dragging {
@@ -79,10 +87,3 @@
     --#{$droppable}--m-dragging--after--BorderColor: var(--#{$droppable}--m-drag-outside--after--BorderColor);
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/drag-drop";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-drag-drop;
-}

package/components/Drawer/drawer.css

@@ -92,9 +92,9 @@
   --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
   --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
   --pf-v5-c-drawer__panel--BoxShadow: none;
+  --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
   --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
   --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
-  --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
   --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -128,14 +128,26 @@
     --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
   }
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
+  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
+}
+
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
+  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
+}
+
 .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
-  padding-left: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
 }
 .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
   order: 0;
-  margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
   order: 1;
 }
@@ -145,6 +157,10 @@
 .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
   transform: translateX(-100%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
   transform: translateX(0);
 }
@@ -189,7 +205,6 @@
   z-index: var(--pf-v5-c-drawer__content--ZIndex);
   flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
   order: 0;
-  background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
 }
 .pf-v5-c-drawer__content.pf-m-no-background {
   --pf-v5-c-drawer__content--BackgroundColor: transparent;
@@ -198,7 +213,10 @@
   --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-light-200--BackgroundColor);
 }
 .pf-v5-c-drawer__content > .pf-v5-c-drawer__body {
-  padding: var(--pf-v5-c-drawer__content--child--PaddingTop) var(--pf-v5-c-drawer__content--child--PaddingRight) var(--pf-v5-c-drawer__content--child--PaddingBottom) var(--pf-v5-c-drawer__content--child--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-drawer__content--child--PaddingTop);
+  padding-block-end: var(--pf-v5-c-drawer__content--child--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-drawer__content--child--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-drawer__content--child--PaddingRight);
 }
 
 .pf-v5-c-drawer__panel {
@@ -216,8 +234,8 @@
 }
 .pf-v5-c-drawer__panel::after {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-drawer__panel--after--Width);
   height: 100%;
   content: "";
@@ -276,26 +294,32 @@
   grid-row: 1;
   grid-column: 2;
   align-self: baseline;
-  margin-top: var(--pf-v5-c-drawer__actions--MarginTop);
-  margin-right: var(--pf-v5-c-drawer__actions--MarginRight);
+  margin-block-start: var(--pf-v5-c-drawer__actions--MarginTop);
+  margin-inline-end: var(--pf-v5-c-drawer__actions--MarginRight);
 }
 
 .pf-v5-c-drawer__body {
-  padding: var(--pf-v5-c-drawer--child--PaddingTop) var(--pf-v5-c-drawer--child--PaddingRight) var(--pf-v5-c-drawer--child--PaddingBottom) var(--pf-v5-c-drawer--child--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-drawer--child--PaddingTop);
+  padding-block-end: var(--pf-v5-c-drawer--child--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-drawer--child--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-drawer--child--PaddingRight);
 }
 .pf-v5-c-drawer__body.pf-m-no-padding {
   padding: 0;
 }
 .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__actions,
 .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__head > .pf-v5-c-drawer__actions {
-  margin-top: 0;
-  margin-right: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-c-drawer__body.pf-m-padding {
-  padding: var(--pf-v5-c-drawer--child--m-padding--PaddingTop) var(--pf-v5-c-drawer--child--m-padding--PaddingRight) var(--pf-v5-c-drawer--child--m-padding--PaddingBottom) var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-drawer--child--m-padding--PaddingTop);
+  padding-block-end: var(--pf-v5-c-drawer--child--m-padding--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-drawer--child--m-padding--PaddingRight);
 }
 .pf-v5-c-drawer__body:not(.pf-m-no-padding) + * {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 .pf-v5-c-drawer__body:last-child {
   flex: 1 1;
@@ -332,21 +356,28 @@
 }
 .pf-v5-c-drawer__splitter::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(--pf-v5-c-drawer__splitter--after--BorderColor);
-  border-width: var(--pf-v5-c-drawer__splitter--after--BorderTopWidth) var(--pf-v5-c-drawer__splitter--after--BorderRightWidth) var(--pf-v5-c-drawer__splitter--after--BorderBottomWidth) var(--pf-v5-c-drawer__splitter--after--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-drawer__splitter--after--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-drawer__splitter--after--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-drawer__splitter--after--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-drawer__splitter--after--BorderRightWidth);
 }
 
 .pf-v5-c-drawer__splitter-handle {
   position: absolute;
-  top: var(--pf-v5-c-drawer__splitter-handle--Top);
-  left: var(--pf-v5-c-drawer__splitter-handle--Left);
+  inset-block-start: var(--pf-v5-c-drawer__splitter-handle--Top);
+  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
   transform: translate(-50%, -50%);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer__splitter-handle {
+  transform: translate(calc(-50% * var(--pf-v5-global--inverse--multiplier)), -50%);
+}
+
 .pf-v5-c-drawer__splitter-handle::after {
   display: block;
   width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -354,7 +385,10 @@
   content: "";
   border-color: var(--pf-v5-c-drawer__splitter-handle--after--BorderColor);
   border-style: solid;
-  border-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth) var(--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-drawer__splitter-handle--after--BorderRightWidth);
 }
 
 @media screen and (min-width: 768px) {
@@ -383,15 +417,15 @@
     --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
   }
   .pf-v5-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-panel-left.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
-    padding-right: var(--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
-    padding-left: 0;
+    padding-inline-start: 0;
+    padding-inline-end: var(--pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
   }
   .pf-v5-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel::after {
-    right: 0;
-    left: auto;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
   .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
     --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-panel-left__splitter-handle--Left);
@@ -407,12 +441,12 @@
     min-height: var(--pf-v5-c-drawer--m-panel-bottom__panel--md--MinHeight);
   }
   .pf-v5-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
-    padding-top: var(--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
-    padding-left: 0;
+    padding-block-start: var(--pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop);
+    padding-inline-start: 0;
   }
   .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel::after {
-    top: 0;
-    left: auto;
+    inset-block-start: 0;
+    inset-inline-start: auto;
     width: 100%;
     height: var(--pf-v5-c-drawer--m-panel-bottom__panel--after--Height);
   }
@@ -546,41 +580,47 @@
     overflow-x: auto;
   }
   .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: 0;
+    margin-inline-start: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
-    margin-left: 0;
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateY(100%);
   }
   .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: 0;
+    margin-block-end: 0;
     transform: translateY(0);
   }
   .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
@@ -607,41 +647,47 @@
     overflow-x: auto;
   }
   .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: 0;
+    margin-inline-start: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
-    margin-left: 0;
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateY(100%);
   }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: 0;
+    margin-block-end: 0;
     transform: translateY(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-lg.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
@@ -668,41 +714,47 @@
     overflow-x: auto;
   }
   .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: 0;
+    margin-inline-start: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
-    margin-left: 0;
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateY(100%);
   }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: 0;
+    margin-block-end: 0;
     transform: translateY(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
@@ -729,41 +781,47 @@
     overflow-x: auto;
   }
   .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-left: 0;
+    margin-inline-start: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
-    margin-left: 0;
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body > .pf-v5-c-drawer__head .pf-v5-c-drawer__close {
     display: unset;
   }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
+    margin-block-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateY(100%);
   }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-bottom.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-bottom: 0;
+    margin-block-end: 0;
     transform: translateY(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
-    margin-right: 0;
+    margin-inline-end: 0;
     transform: translateX(0);
   }
   .pf-v5-c-drawer.pf-m-static-on-2xl.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {