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

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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.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/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/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/DualListSelector/dual-list-selector.css

@@ -130,11 +130,15 @@
   --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
 }
 .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
+  transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
-  transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
+  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
 }
@@ -233,6 +237,10 @@
   padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
 }
 
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
+  scale: -1 1;
+}
+
 .pf-v5-c-dual-list-selector__item-main {
   display: flex;
   min-width: 0;

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

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

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

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

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

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

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

@@ -117,6 +117,10 @@
   transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }

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

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

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

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

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

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

package/css/components/Menu/menu.css

@@ -259,6 +259,10 @@
 .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
   --pf-v5-c-menu--BoxShadow: none;
   position: absolute;
@@ -270,6 +274,10 @@
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
   position: relative;
   overflow: hidden;
@@ -569,6 +577,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
   color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
   margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);

package/css/components/Menu/menu.d.ts

@@ -1,6 +1,7 @@
 import './menu.css';
 declare const _default: {
   "breadcrumb": "pf-v5-c-breadcrumb",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuBreadcrumb": "pf-v5-c-menu__breadcrumb",
@@ -55,6 +56,7 @@ declare const _default: {
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Menu/menu.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./menu.css');
 exports.default = {
   "breadcrumb": "pf-v5-c-breadcrumb",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuBreadcrumb": "pf-v5-c-menu__breadcrumb",
@@ -57,5 +58,6 @@ exports.default = {
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Menu/menu.mjs

@@ -1,6 +1,7 @@
 import './menu.css';
 export default {
   "breadcrumb": "pf-v5-c-breadcrumb",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuBreadcrumb": "pf-v5-c-menu__breadcrumb",
@@ -55,5 +56,6 @@ export default {
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Nav/nav.css

@@ -414,6 +414,10 @@
 .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
   margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
   content: none;
 }
@@ -857,6 +861,10 @@
   display: inline-block;
   transition: var(--pf-v5-c-nav__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
   transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
@@ -912,6 +920,10 @@
   opacity: 0;
   transition: var(--pf-v5-c-nav__scroll-button--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__scroll-button::before {
   position: absolute;
   inset-block-start: 0;
@@ -939,6 +951,10 @@
   margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
   inset-inline-end: 0;
 }
@@ -947,6 +963,10 @@
   margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
+  transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
   inset-inline-start: 0;
 }

package/css/components/Nav/nav.d.ts

@@ -1,5 +1,6 @@
 import './nav.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuContent": "pf-v5-c-menu__content",
@@ -34,6 +35,7 @@ declare const _default: {
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
   "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./nav.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuContent": "pf-v5-c-menu__content",
@@ -36,5 +37,6 @@ exports.default = {
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
   "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Nav/nav.mjs

@@ -1,5 +1,6 @@
 import './nav.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "divider": "pf-v5-c-divider",
   "menu": "pf-v5-c-menu",
   "menuContent": "pf-v5-c-menu__content",
@@ -34,5 +35,6 @@ export default {
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
   "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };