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

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.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.1.1-prerelease.3...@patternfly/react-styles@5.1.1-prerelease.4) (2023-09-06)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 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

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/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/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;

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/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/Popover/popover.css

@@ -61,37 +61,85 @@
   --pf-v5-c-popover--MinWidth: auto;
   --pf-v5-c-popover--MaxWidth: none;
 }
-.pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
+.pf-v5-c-popover:is(.pf-m-top,
+.pf-m-top-left,
+.pf-m-top-right,
+.pf-m-block-start,
+.pf-m-block-start-inline-start,
+.pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
   inset-block-end: 0;
   inset-inline-start: 50%;
   transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
 }
-.pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
+}
+
+.pf-v5-c-popover:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.pf-m-bottom-right,
+.pf-m-block-end,
+.pf-m-block-end-inline-start,
+.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
   inset-block-start: 0;
   inset-inline-start: 50%;
   transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
 }
-.pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
+}
+
+.pf-v5-c-popover:is(.pf-m-left,
+.pf-m-left-top,
+.pf-m-left-bottom,
+.pf-m-inline-start,
+.pf-m-inline-start-block-start,
+.pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
   inset-block-start: 50%;
   inset-inline-end: 0;
   transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
 }
-.pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
+}
+
+.pf-v5-c-popover:is(.pf-m-right,
+.pf-m-right-top,
+.pf-m-right-bottom,
+.pf-m-inline-end,
+.pf-m-inline-end-block-start,
+.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
   inset-block-start: 50%;
   inset-inline-start: 0;
   transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
 }
-.pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
+  transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
+}
+
+.pf-v5-c-popover:is(.pf-m-left-top,
+.pf-m-right-top,
+.pf-m-inline-start-block-start,
+.pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
   inset-block-start: var(--pf-v5-c-popover__arrow--Height);
 }
-.pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
+.pf-v5-c-popover:is(.pf-m-left-bottom,
+.pf-m-right-bottom,
+.pf-m-inline-start-block-end,
+.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
   inset-block-start: auto;
   inset-block-end: 0;
 }
-.pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
+.pf-v5-c-popover:is(.pf-m-top-left,
+.pf-m-bottom-left,
+.pf-m-block-start-inline-start,
+.pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
   inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
 }
-.pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
+.pf-v5-c-popover:is(.pf-m-top-right,
+.pf-m-bottom-right,
+.pf-m-block-start-inline-end,
+.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
   inset-inline-start: auto;
   inset-inline-end: 0;
 }

package/css/components/Popover/popover.d.ts

@@ -1,20 +1,33 @@
 import './popover.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "noPadding": "pf-m-no-padding",
     "widthAuto": "pf-m-width-auto",
     "top": "pf-m-top",
     "topLeft": "pf-m-top-left",
     "topRight": "pf-m-top-right",
+    "blockStart": "pf-m-block-start",
+    "blockStartInlineStart": "pf-m-block-start-inline-start",
+    "blockStartInlineEnd": "pf-m-block-start-inline-end",
     "bottom": "pf-m-bottom",
     "bottomLeft": "pf-m-bottom-left",
     "bottomRight": "pf-m-bottom-right",
+    "blockEnd": "pf-m-block-end",
+    "blockEndInlineStart": "pf-m-block-end-inline-start",
+    "blockEndInlineEnd": "pf-m-block-end-inline-end",
     "left": "pf-m-left",
     "leftTop": "pf-m-left-top",
     "leftBottom": "pf-m-left-bottom",
+    "inlineStart": "pf-m-inline-start",
+    "inlineStartBlockStart": "pf-m-inline-start-block-start",
+    "inlineStartBlockEnd": "pf-m-inline-start-block-end",
     "right": "pf-m-right",
     "rightTop": "pf-m-right-top",
     "rightBottom": "pf-m-right-bottom",
+    "inlineEnd": "pf-m-inline-end",
+    "inlineEndBlockStart": "pf-m-inline-end-block-start",
+    "inlineEndBlockEnd": "pf-m-inline-end-block-end",
     "danger": "pf-m-danger",
     "warning": "pf-m-warning",
     "success": "pf-m-success",
@@ -31,6 +44,7 @@ declare const _default: {
   "popoverTitle": "pf-v5-c-popover__title",
   "popoverTitleIcon": "pf-v5-c-popover__title-icon",
   "popoverTitleText": "pf-v5-c-popover__title-text",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;