@patternfly/patternfly 5.1.0-prerelease.9 → 5.2.0-prerelease.1

package/README.md

@@ -63,19 +63,19 @@ When making visual changes to a full page example, new example preview screensho
 
 ## Guidelines for CSS development
 
-- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf4.patternfly.org, and information detailing the change.
+- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://core-staging.patternfly.org, and information detailing the change.
 - If global variables are modified in Core, a React issue should be opened to address this.
 - CSS developers should ensure that animation is well documented and communicated to the respective React developer.
 - Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
 
 ### Handlebars guidelines 
-[For information on how to contribute, refer to our guidelines.](/contribution)
+[For information on how to contribute, refer to our guidelines.](https://core-staging.patternfly.org/contribution)
 
 ### CSS/Sass guidelines
-[For more information on using CSS and Sass, refer to our guidelines.](/guidelines)
+[For more information on using CSS and Sass, refer to our guidelines.](https://core-staging.patternfly.org/guidelines)
 
 ### Custom icon guidelines
-[For more information on custom icons, refer to our guidelines.](/adding-custom-icons)
+[For more information on custom icons, refer to our guidelines.](https://core-staging.patternfly.org/adding-custom-icons)
 
 ## Beta components
 
@@ -83,7 +83,7 @@ When creating a brand new component, it should be released as beta in order to g
 
 ## Testing for accessibility
 
-PatternFly uses [aXe: The Accessibility Engine](https://www.deque.com/axe/) to check for accessibility violations. Our goal is to meet WCAG 2.0 AA requirements, as noted in our [Accessibility guide](https://pf4.patternfly.org/accessibility-guide).
+PatternFly uses [aXe: The Accessibility Engine](https://www.deque.com/axe/) to check for accessibility violations. Our goal is to meet WCAG 2.0 AA requirements, as noted in our [Accessibility guide](https://www.patternfly.org/accessibility/patternflys-accessibility).
 
 ### How to perform an accessibility audit with aXe
 aXe is available as either a browser extension or npm script.
@@ -112,7 +112,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
 ## FAQ
 
 #### CSS Variables
-[How do I use CSS variables to customize the library?](https://pf4.patternfly.org/guidelines#variables)
+[How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables)
 
 #### Browser support
 PatternFly 5 is supported on the latest two major versions of the following browsers:

package/base/_common.scss

@@ -25,21 +25,22 @@
 }
 
 // RTL helpers
+
+// Sets a block to RTL
 .#{$pf-prefix}m-dir-rtl {
-  @include pf-v5-rtl("transform-flip");
+  @include pf-v5-set-inverse;
 
   direction: rtl;
 }
 
-.#{$pf-prefix}m-dir-ltr,
-.ws-dir-ltr {
-  @include pf-v5-rtl("transform-flip-revert");
+// Sets a block to LTR
+.#{$pf-prefix}m-dir-ltr {
+  @include pf-v5-set-inverse(false);
 
   direction: ltr;
 }
 
-.#{$pf-prefix}m-rtl-flip-inline {
-  @include pf-v5-rtl("flip-inline");
+// Mirrors/flips something horizontally/inline in RTL
+.#{$pf-prefix}m-mirror-inline-rtl {
+  @include pf-v5-mirror-inline-on-rtl;
 }
-
-@include pf-v5-rtl("transform-flip");

package/base/_variables.scss

@@ -284,7 +284,11 @@
   --#{$pf-global}--target-size--MinHeight: #{$pf-v5-global--target-size--MinHeight};
 
   // RTL
-  --#{$pf-global}--rtl--transform--flip: 1;
+  @include pf-v5-set-inverse(false);
+}
+
+@include pf-v5-rtl {
+  @include pf-v5-set-inverse;
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/base/patternfly-common.css

@@ -26,22 +26,15 @@
 }
 
 .pf-v5-m-dir-rtl {
+  --pf-v5-global--inverse--multiplier: -1;
   direction: rtl;
 }
-:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
-  --pf-v5-global--rtl--transform--flip: -1;
-}
 
-.pf-v5-m-dir-ltr,
-.ws-dir-ltr {
-  --pf-v5-global--rtl--transform--flip: 1;
+.pf-v5-m-dir-ltr {
+  --pf-v5-global--inverse--multiplier: 1;
   direction: ltr;
 }
 
-:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
   scale: -1 1;
-}
-
-:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
-  --pf-v5-global--rtl--transform--flip: -1;
 }

package/base/patternfly-variables.css

@@ -232,7 +232,11 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
-  --pf-v5-global--rtl--transform--flip: 1;
+  --pf-v5-global--inverse--multiplier: 1;
+}
+
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--inverse--multiplier: -1;
 }
 
 :where(.pf-v5-theme-dark) {

package/components/AboutModalBox/about-modal-box.css

@@ -26,6 +26,7 @@
   --pf-v5-c-about-modal-box--Width: 100%;
   --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
   --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
+  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -78,6 +79,10 @@
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
+  --pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
+}
+
 @media screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box {
     --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);

package/components/AboutModalBox/about-modal-box.scss

@@ -15,6 +15,13 @@
   --#{$about-modal-box}--sm--GridTemplateColumns: 5fr 1fr;
   --#{$about-modal-box}--lg--GridTemplateColumns: 1fr .6fr;
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$about-modal-box}--BackgroundPosition,
+    $ltr-val: bottom right,
+    $rtl-val: bottom left
+  );
+
+
   // Brand
   --#{$about-modal-box}__brand--PaddingTop: var(--#{$pf-global}--spacer--2xl);
   --#{$about-modal-box}__brand--PaddingRight: var(--#{$pf-global}--spacer--xl);

package/components/Accordion/accordion.css

@@ -200,6 +200,9 @@
 .pf-v5-c-accordion__toggle-icon {
   transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-accordion__expandable-content {
   font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);

package/components/Accordion/accordion.scss

@@ -230,6 +230,8 @@
 }
 
 .#{$accordion}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 

package/components/Alert/alert.css

@@ -159,6 +159,9 @@
   transition: var(--pf-v5-c-alert__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-alert__icon {
   display: flex;

package/components/Alert/alert.scss

@@ -199,6 +199,8 @@
 }
 
 .#{$alert}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   display: inline-block;
   transition: var(--#{$alert}__toggle-icon--Transition);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));

package/components/BackgroundImage/background-image.css

@@ -1,11 +1,11 @@
 .pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
   --pf-v5-c-background-image--BackgroundImage: none;
-  --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
   --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
   --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
+  --pf-v5-c-background-image--BackgroundPosition: bottom right;
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -17,4 +17,7 @@
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
+  --pf-v5-c-background-image--BackgroundPosition: bottom left;
 }

package/components/BackgroundImage/background-image.scss

@@ -3,12 +3,17 @@
 .#{$background-image} {
   --#{$background-image}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
   --#{$background-image}--BackgroundImage: none;
-  --#{$background-image}--BackgroundPosition: bottom right;
   --#{$background-image}--BackgroundSize--min-width: 200px;
   --#{$background-image}--BackgroundSize--width: 60%;
   --#{$background-image}--BackgroundSize--max-width: 600px;
   --#{$background-image}--BackgroundSize: clamp(var(--#{$background-image}--BackgroundSize--min-width), var(--#{$background-image}--BackgroundSize--width), var(--#{$background-image}--BackgroundSize--max-width));
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$background-image}--BackgroundPosition,
+    $ltr-val: bottom right,
+    $rtl-val: bottom left
+  );
+
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;

package/components/Banner/banner.css

@@ -117,9 +117,6 @@
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-banner {
-  color: var(false);
-}
 :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
   --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
 }

package/components/Breadcrumb/breadcrumb.css

@@ -45,6 +45,9 @@
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;

package/components/Breadcrumb/breadcrumb.scss

@@ -58,6 +58,8 @@
 
 // Breadcrumb divider
 .#{$breadcrumb}__item-divider {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);
   line-height: 1;

package/components/Button/button.css

@@ -432,6 +432,9 @@
   color: var(--pf-v5-c-button--m-plain--Color);
   background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
 }
+.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
+  padding: 0;
+}
 .pf-v5-c-button.pf-m-plain:hover {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);

package/components/Button/button.scss

@@ -559,6 +559,10 @@
     color: var(--#{$button}--m-plain--Color);
     background-color: var(--#{$button}--m-plain--BackgroundColor);
 
+    &.pf-m-no-padding {
+      padding: 0;
+    }
+
     &:hover {
       --#{$button}--m-plain--Color: var(--#{$button}--m-plain--hover--Color);
       --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);

package/components/CalendarMonth/calendar-month.css

@@ -84,6 +84,10 @@
   margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
   margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
+  scale: -1 1;
+}
+
 .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
   --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
   --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);

package/components/CalendarMonth/calendar-month.scss

@@ -81,6 +81,8 @@
 }
 
 .#{$calendar-month}__header-nav-control {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
   margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);
 

package/components/Card/card.css

@@ -36,7 +36,7 @@
   --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
-  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
@@ -270,6 +270,9 @@
   display: inline-block;
   transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-card__title-text {
   font-family: var(--pf-v5-c-card__title-text--FontFamily);

package/components/Card/card.scss

@@ -58,7 +58,7 @@
   --#{$card}--m-selectable--m-clickable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
 
   // Selected selectable AND clickable card
-  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --#{$card}--m-selectable--m-clickable--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
 
   // Clicked (pf-m-current) selectable AND clickable card
@@ -369,6 +369,8 @@
 }
 
 .#{$card}__header-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   transition: var(--#{$card}__header-toggle-icon--Transition);
 }

package/components/ClipboardCopy/clipboard-copy.css

@@ -50,6 +50,9 @@
 .pf-v5-c-clipboard-copy__toggle-icon {
   transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-clipboard-copy__expandable-content {
   padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -66,6 +66,8 @@
 }
 
 .#{$clipboard-copy}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
 }
 

package/components/DataList/data-list.css

@@ -812,6 +812,9 @@
   transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-data-list__item-content {
   display: grid;

package/components/DataList/data-list.scss

@@ -405,6 +405,8 @@
 
 // toggle icon rotate
 .#{$data-list}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   height: var(--#{$data-list}__toggle-icon--Height);
   pointer-events: none;
   transition: var(--#{$data-list}__toggle-icon--Transition);

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,6 +128,14 @@
     --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-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
 }
@@ -136,6 +144,10 @@
   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);
 }
@@ -359,6 +375,10 @@
   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);
@@ -564,6 +584,9 @@
     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-inline-start: 0;
     transform: translateX(0);
@@ -576,6 +599,9 @@
     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-inline-end: 0;
     transform: translateX(0);
@@ -625,6 +651,9 @@
     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-inline-start: 0;
     transform: translateX(0);
@@ -637,6 +666,9 @@
     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-inline-end: 0;
     transform: translateX(0);
@@ -686,6 +718,9 @@
     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-inline-start: 0;
     transform: translateX(0);
@@ -698,6 +733,9 @@
     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-inline-end: 0;
     transform: translateX(0);
@@ -747,6 +785,9 @@
     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-inline-start: 0;
     transform: translateX(0);
@@ -759,6 +800,9 @@
     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-inline-end: 0;
     transform: translateX(0);

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);
@@ -176,7 +185,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     > .#{$drawer}__panel {
       order: 0;
       margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-      transform: translateX(-100%);
+
+      @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 {
@@ -432,9 +450,15 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 .#{$drawer}__splitter-handle {
   position: absolute;
- inset-block-start: var(--#{$drawer}__splitter-handle--Top);
- inset-inline-start: 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;
@@ -642,7 +666,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
       > .#{$drawer}__main > .#{$drawer}__panel {
         margin-inline-start: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-        transform: translateX(100%);
+
+        @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
@@ -661,7 +690,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
         > .#{$drawer}__main > .#{$drawer}__panel {
           margin-inline-start: 0;
           margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-          transform: translateX(-100%);
+
+          @include pf-v5-bidirectional-style(
+            $prop: transform,
+            $ltr-val: translateX(-100%),
+            $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+          ); 
         }
 
         // Inline, expanded, panel left