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

package/css/components/Drawer/drawer.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./drawer.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "drawerActions": "pf-v5-c-drawer__actions",
   "drawerBody": "pf-v5-c-drawer__body",
@@ -60,5 +61,6 @@ exports.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"
 };

package/css/components/Drawer/drawer.mjs

@@ -1,5 +1,6 @@
 import './drawer.css';
 export 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,5 +59,6 @@ export 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"
 };

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/Form/form.css

@@ -453,6 +453,9 @@
   transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-form__field-group-header {
   display: flex;

package/css/components/Form/form.d.ts

@@ -1,5 +1,6 @@
 import './form.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "form": "pf-v5-c-form",
   "formActions": "pf-v5-c-form__actions",
   "formFieldGroup": "pf-v5-c-form__field-group",
@@ -50,6 +51,7 @@ declare const _default: {
     "hidden": "pf-m-hidden",
     "expanded": "pf-m-expanded"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Form/form.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./form.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "form": "pf-v5-c-form",
   "formActions": "pf-v5-c-form__actions",
   "formFieldGroup": "pf-v5-c-form__field-group",
@@ -52,5 +53,6 @@ exports.default = {
     "hidden": "pf-m-hidden",
     "expanded": "pf-m-expanded"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Form/form.mjs

@@ -1,5 +1,6 @@
 import './form.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "form": "pf-v5-c-form",
   "formActions": "pf-v5-c-form__actions",
   "formFieldGroup": "pf-v5-c-form__field-group",
@@ -50,5 +51,6 @@ export default {
     "hidden": "pf-m-hidden",
     "expanded": "pf-m-expanded"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/JumpLinks/jump-links.css

@@ -252,6 +252,9 @@
   transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-jump-links__toggle-text {
   margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);

package/css/components/JumpLinks/jump-links.d.ts

@@ -1,6 +1,7 @@
 import './jump-links.css';
 declare const _default: {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "jumpLinks": "pf-v5-c-jump-links",
   "jumpLinksItem": "pf-v5-c-jump-links__item",
   "jumpLinksLabel": "pf-v5-c-jump-links__label",
@@ -28,6 +29,7 @@ declare const _default: {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/JumpLinks/jump-links.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./jump-links.css');
 exports.default = {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "jumpLinks": "pf-v5-c-jump-links",
   "jumpLinksItem": "pf-v5-c-jump-links__item",
   "jumpLinksLabel": "pf-v5-c-jump-links__label",
@@ -30,5 +31,6 @@ exports.default = {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/JumpLinks/jump-links.mjs

@@ -1,6 +1,7 @@
 import './jump-links.css';
 export default {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "jumpLinks": "pf-v5-c-jump-links",
   "jumpLinksItem": "pf-v5-c-jump-links__item",
   "jumpLinksLabel": "pf-v5-c-jump-links__label",
@@ -28,5 +29,6 @@ export default {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "current": "pf-m-current"
-  }
+  },
+  "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"
 };

package/css/components/NotificationDrawer/notification-drawer.css

@@ -267,6 +267,10 @@
   color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/css/components/NotificationDrawer/notification-drawer.d.ts

@@ -1,5 +1,6 @@
 import './notification-drawer.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "read": "pf-m-read",
     "info": "pf-m-info",
@@ -30,6 +31,7 @@ declare const _default: {
   "notificationDrawerListItemHeaderIcon": "pf-v5-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-v5-c-notification-drawer__list-item-header-title",
   "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/NotificationDrawer/notification-drawer.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./notification-drawer.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "read": "pf-m-read",
     "info": "pf-m-info",
@@ -32,5 +33,6 @@ exports.default = {
   "notificationDrawerListItemHeaderIcon": "pf-v5-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-v5-c-notification-drawer__list-item-header-title",
   "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/NotificationDrawer/notification-drawer.mjs

@@ -1,5 +1,6 @@
 import './notification-drawer.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "read": "pf-m-read",
     "info": "pf-m-info",
@@ -30,5 +31,6 @@ export default {
   "notificationDrawerListItemHeaderIcon": "pf-v5-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-v5-c-notification-drawer__list-item-header-title",
   "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Page/page.css

@@ -399,6 +399,10 @@
   transition: var(--pf-v5-c-page__sidebar--Transition);
   transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
+  transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
+}
+
 .pf-v5-c-page__sidebar.pf-m-expanded {
   --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);

package/css/components/Page/page.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   "brand": "pf-v5-c-brand",
   "button": "pf-v5-c-button",
   "contextSelector": "pf-v5-c-context-selector",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
@@ -88,6 +89,7 @@ declare const _default: {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Page/page.js

@@ -6,6 +6,7 @@ exports.default = {
   "brand": "pf-v5-c-brand",
   "button": "pf-v5-c-button",
   "contextSelector": "pf-v5-c-context-selector",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
@@ -90,5 +91,6 @@ exports.default = {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Page/page.mjs

@@ -4,6 +4,7 @@ export default {
   "brand": "pf-v5-c-brand",
   "button": "pf-v5-c-button",
   "contextSelector": "pf-v5-c-context-selector",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
@@ -88,5 +89,6 @@ export default {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Pagination/pagination.css

@@ -196,6 +196,10 @@
   justify-content: flex-end;
 }
 
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
+  scale: -1 1;
+}
+
 .pf-v5-c-pagination__nav-control .pf-v5-c-button {
   padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);

package/css/components/Pagination/pagination.d.ts

@@ -1,6 +1,7 @@
 import './pagination.css';
 declare const _default: {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
   "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
@@ -65,6 +66,7 @@ declare const _default: {
   "paginationNavControl": "pf-v5-c-pagination__nav-control",
   "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
   "paginationTotalItems": "pf-v5-c-pagination__total-items",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;