@patternfly/react-styles 5.1.1-prerelease.1 → 5.1.1-prerelease.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.1.1-prerelease.3 (2023-09-05)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 5.1.1-prerelease.2 (2023-08-31)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 ## 5.1.1-prerelease.1 (2023-08-29)
 
 # 5.0.0 (2023-07-27)

package/css/components/Accordion/accordion.css

@@ -200,6 +200,9 @@
 .pf-v5-c-accordion__toggle-icon {
   transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .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/css/components/Accordion/accordion.d.ts

@@ -6,12 +6,14 @@ declare const _default: {
   "accordionToggle": "pf-v5-c-accordion__toggle",
   "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
   "accordionToggleText": "pf-v5-c-accordion__toggle-text",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Accordion/accordion.js

@@ -8,11 +8,13 @@ exports.default = {
   "accordionToggle": "pf-v5-c-accordion__toggle",
   "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
   "accordionToggleText": "pf-v5-c-accordion__toggle-text",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Accordion/accordion.mjs

@@ -6,11 +6,13 @@ export default {
   "accordionToggle": "pf-v5-c-accordion__toggle",
   "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
   "accordionToggleText": "pf-v5-c-accordion__toggle-text",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-alert__icon {
   display: flex;

package/css/components/Alert/alert.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
   "alertToggle": "pf-v5-c-alert__toggle",
   "alertToggleIcon": "pf-v5-c-alert__toggle-icon",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "custom": "pf-m-custom",
     "success": "pf-m-success",
@@ -21,6 +22,7 @@ declare const _default: {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Alert/alert.js

@@ -11,6 +11,7 @@ exports.default = {
   "alertToggle": "pf-v5-c-alert__toggle",
   "alertToggleIcon": "pf-v5-c-alert__toggle-icon",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "custom": "pf-m-custom",
     "success": "pf-m-success",
@@ -23,5 +24,6 @@ exports.default = {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Alert/alert.mjs

@@ -9,6 +9,7 @@ export default {
   "alertToggle": "pf-v5-c-alert__toggle",
   "alertToggleIcon": "pf-v5-c-alert__toggle-icon",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "custom": "pf-m-custom",
     "success": "pf-m-success",
@@ -21,5 +22,6 @@ export default {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
+  --pf-v5-c-background-image--BackgroundPosition: bottom left;
 }

package/css/components/BackgroundImage/background-image.d.ts

@@ -1,5 +1,7 @@
 import './background-image.css';
 declare const _default: {
-  "backgroundImage": "pf-v5-c-background-image"
+  "backgroundImage": "pf-v5-c-background-image",
+  "dirRtl": "pf-v5-m-dir-rtl",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/BackgroundImage/background-image.js

@@ -2,5 +2,7 @@
 exports.__esModule = true;
 require('./background-image.css');
 exports.default = {
-  "backgroundImage": "pf-v5-c-background-image"
+  "backgroundImage": "pf-v5-c-background-image",
+  "dirRtl": "pf-v5-m-dir-rtl",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/BackgroundImage/background-image.mjs

@@ -1,4 +1,6 @@
 import './background-image.css';
 export default {
-  "backgroundImage": "pf-v5-c-background-image"
+  "backgroundImage": "pf-v5-c-background-image",
+  "dirRtl": "pf-v5-m-dir-rtl",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Breadcrumb/breadcrumb.css

@@ -45,6 +45,9 @@
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.ws-dir-rtl, .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/css/components/Breadcrumb/breadcrumb.d.ts

@@ -7,9 +7,11 @@ declare const _default: {
   "breadcrumbItemDivider": "pf-v5-c-breadcrumb__item-divider",
   "breadcrumbLink": "pf-v5-c-breadcrumb__link",
   "breadcrumbList": "pf-v5-c-breadcrumb__list",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Breadcrumb/breadcrumb.js

@@ -9,8 +9,10 @@ exports.default = {
   "breadcrumbItemDivider": "pf-v5-c-breadcrumb__item-divider",
   "breadcrumbLink": "pf-v5-c-breadcrumb__link",
   "breadcrumbList": "pf-v5-c-breadcrumb__list",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Breadcrumb/breadcrumb.mjs

@@ -7,8 +7,10 @@ export default {
   "breadcrumbItemDivider": "pf-v5-c-breadcrumb__item-divider",
   "breadcrumbLink": "pf-v5-c-breadcrumb__link",
   "breadcrumbList": "pf-v5-c-breadcrumb__list",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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(.ws-dir-rtl, .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/css/components/CalendarMonth/calendar-month.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
   "calendarMonthHeaderMonth": "pf-v5-c-calendar-month__header-month",
   "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
   "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "prevMonth": "pf-m-prev-month",
     "nextMonth": "pf-m-next-month",
@@ -24,6 +25,7 @@ declare const _default: {
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/CalendarMonth/calendar-month.js

@@ -13,6 +13,7 @@ exports.default = {
   "calendarMonthHeaderMonth": "pf-v5-c-calendar-month__header-month",
   "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
   "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "prevMonth": "pf-m-prev-month",
     "nextMonth": "pf-m-next-month",
@@ -26,5 +27,6 @@ exports.default = {
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/CalendarMonth/calendar-month.mjs

@@ -11,6 +11,7 @@ export default {
   "calendarMonthHeaderMonth": "pf-v5-c-calendar-month__header-month",
   "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
   "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "prevMonth": "pf-m-prev-month",
     "nextMonth": "pf-m-next-month",
@@ -24,5 +25,6 @@ export default {
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Card/card.css

@@ -270,6 +270,9 @@
   display: inline-block;
   transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .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/css/components/Card/card.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
   "cardTitleText": "pf-v5-c-card__title-text",
   "checkInput": "pf-v5-c-check__input",
   "checkLabel": "pf-v5-c-check__label",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "modifiers": {
     "selectable": "pf-m-selectable",
@@ -39,6 +40,7 @@ declare const _default: {
   },
   "radioInput": "pf-v5-c-radio__input",
   "radioLabel": "pf-v5-c-radio__label",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Card/card.js

@@ -17,6 +17,7 @@ exports.default = {
   "cardTitleText": "pf-v5-c-card__title-text",
   "checkInput": "pf-v5-c-check__input",
   "checkLabel": "pf-v5-c-check__label",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "modifiers": {
     "selectable": "pf-m-selectable",
@@ -41,5 +42,6 @@ exports.default = {
   },
   "radioInput": "pf-v5-c-radio__input",
   "radioLabel": "pf-v5-c-radio__label",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Card/card.mjs

@@ -15,6 +15,7 @@ export default {
   "cardTitleText": "pf-v5-c-card__title-text",
   "checkInput": "pf-v5-c-check__input",
   "checkLabel": "pf-v5-c-check__label",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "modifiers": {
     "selectable": "pf-m-selectable",
@@ -39,5 +40,6 @@ export default {
   },
   "radioInput": "pf-v5-c-radio__input",
   "radioLabel": "pf-v5-c-radio__label",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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(.ws-dir-rtl, .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/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -8,12 +8,14 @@ declare const _default: {
   "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
   "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
   "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/ClipboardCopy/clipboard-copy.js

@@ -10,11 +10,13 @@ exports.default = {
   "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
   "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
   "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -8,11 +8,13 @@ export default {
   "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
   "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
   "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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(.ws-dir-rtl, .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/css/components/DataList/data-list.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
   "dataListText": "pf-v5-c-data-list__text",
   "dataListToggle": "pf-v5-c-data-list__toggle",
   "dataListToggleIcon": "pf-v5-c-data-list__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -53,6 +54,7 @@ declare const _default: {
     "disabled": "pf-m-disabled",
     "noPadding": "pf-m-no-padding"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/DataList/data-list.js

@@ -18,6 +18,7 @@ exports.default = {
   "dataListText": "pf-v5-c-data-list__text",
   "dataListToggle": "pf-v5-c-data-list__toggle",
   "dataListToggleIcon": "pf-v5-c-data-list__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -55,5 +56,6 @@ exports.default = {
     "disabled": "pf-m-disabled",
     "noPadding": "pf-m-no-padding"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/DataList/data-list.mjs

@@ -16,6 +16,7 @@ export default {
   "dataListText": "pf-v5-c-data-list__text",
   "dataListToggle": "pf-v5-c-data-list__toggle",
   "dataListToggleIcon": "pf-v5-c-data-list__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -53,5 +54,6 @@ export default {
     "disabled": "pf-m-disabled",
     "noPadding": "pf-m-no-padding"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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(.ws-dir-rtl, .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/css/components/Drawer/drawer.d.ts

@@ -1,5 +1,6 @@
 import './drawer.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "drawerActions": "pf-v5-c-drawer__actions",
   "drawerBody": "pf-v5-c-drawer__body",
@@ -58,6 +59,7 @@ declare const _default: {
     "staticOn_2xl": "pf-m-static-on-2xl"
   },
   "pageMain": "pf-v5-c-page__main",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;