@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0-prerelease.9

package/README.md

@@ -68,6 +68,15 @@ When making visual changes to a full page example, new example preview screensho
 - CSS developers should ensure that animation is well documented and communicated to the respective React developer.
 - Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
 
+### Handlebars guidelines 
+[For information on how to contribute, refer to our guidelines.](/contribution)
+
+### CSS/Sass guidelines
+[For more information on using CSS and Sass, refer to our guidelines.](/guidelines)
+
+### Custom icon guidelines
+[For more information on custom icons, refer to our guidelines.](/adding-custom-icons)
+
 ## Beta components
 
 When creating a brand new component, it should be released as beta in order to get feedback.
@@ -112,3 +121,4 @@ PatternFly 5 is supported on the latest two major versions of the following brow
 - Firefox
 - Safari
 - Edge
+

package/base/_common.scss

@@ -23,3 +23,23 @@
   --#{$pf-global}--FontFamily--heading: var(--#{$pf-global}--FontFamily--heading--vf);
   --#{$pf-global}--FontFamily--monospace: var(--#{$pf-global}--FontFamily--monospace--vf);
 }
+
+// RTL helpers
+.#{$pf-prefix}m-dir-rtl {
+  @include pf-v5-rtl("transform-flip");
+
+  direction: rtl;
+}
+
+.#{$pf-prefix}m-dir-ltr,
+.ws-dir-ltr {
+  @include pf-v5-rtl("transform-flip-revert");
+
+  direction: ltr;
+}
+
+.#{$pf-prefix}m-rtl-flip-inline {
+  @include pf-v5-rtl("flip-inline");
+}
+
+@include pf-v5-rtl("transform-flip");

package/base/_variables.scss

@@ -282,6 +282,9 @@
   // A11y
   --#{$pf-global}--target-size--MinWidth: #{$pf-v5-global--target-size--MinWidth};
   --#{$pf-global}--target-size--MinHeight: #{$pf-v5-global--target-size--MinHeight};
+
+  // RTL
+  --#{$pf-global}--rtl--transform--flip: 1;
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/base/patternfly-common.css

@@ -23,4 +23,25 @@
   --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
   --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
+}
+
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
 }

package/base/patternfly-variables.css

@@ -232,6 +232,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-v5-theme-dark) {

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

@@ -133,7 +133,7 @@
   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));
+  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
@@ -233,6 +233,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/components/DualListSelector/dual-list-selector.scss

@@ -169,9 +169,9 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
 
     .#{$dual-list-selector}__item-toggle {
       position: absolute;
-     inset-block-start: 0;
-     inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
-      transform: translateX(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX));
+      inset-block-start: 0;
+      inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
+      transform: translateX(calc(var(--#{$dual-list-selector}__list__list__item-toggle--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
     }
   }
 
@@ -294,6 +294,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   padding-inline-end: var(--#{$dual-list-selector}__controls--PaddingRight);
 }
 
+:is(.#{$dual-list-selector}__controls-item, .#{$dual-list-selector}__item-toggle-icon) {
+  @include pf-v5-rtl("flip-inline");
+}
+
 .#{$dual-list-selector}__item-main {
   display: flex;
   min-width: 0;

package/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/components/Pagination/pagination.scss

@@ -237,6 +237,8 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
 // nav control
 .#{$pagination}__nav-control {
+  @include pf-v5-rtl("flip-inline");
+
   .#{$button} {
     padding-inline-start: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
     padding-inline-end: var(--#{$pagination}__nav-control--c-button--PaddingRight);

package/components/Switch/switch.css

@@ -67,7 +67,7 @@
   background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
 }
 .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
-  transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
+  transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 .pf-v5-c-switch__input:checked ~ .pf-m-off {
   display: none;

package/components/Switch/switch.scss

@@ -88,7 +88,7 @@
       background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
 
       &::before {
-        transform: translateX(var(--#{$switch}__input--checked__toggle--before--TranslateX));
+        transform: translateX(calc(var(--#{$switch}__input--checked__toggle--before--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
       }
     }
 

package/components/Wizard/wizard.css

@@ -303,6 +303,9 @@
   margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
   color: var(--pf-v5-c-wizard__toggle-separator--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__toggle-icon {
   line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -420,7 +423,7 @@
   color: var(--pf-v5-c-wizard__nav-link--before--Color);
   background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
   border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
-  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
+  transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 
 .pf-v5-c-wizard__nav-link::before {
@@ -469,6 +472,9 @@
   transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__main {
   z-index: var(--pf-v5-c-wizard__main--ZIndex);

package/components/Wizard/wizard.scss

@@ -335,6 +335,8 @@
 }
 
 .#{$wizard}__toggle-separator {
+  @include pf-v5-rtl("flip-inline");
+
   margin-inline-start: var(--#{$wizard}__toggle-separator--MarginLeft);
   color: var(--#{$wizard}__toggle-separator--Color);
 }
@@ -460,8 +462,8 @@
   @at-root .#{$wizard}__toggle-num,
   &::before {
     position: absolute;
-   inset-block-start: var(--#{$wizard}__nav-link--before--Top);
-   inset-inline-start: 0;
+    inset-block-start: var(--#{$wizard}__nav-link--before--Top);
+    inset-inline-start: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -472,7 +474,7 @@
     color: var(--#{$wizard}__nav-link--before--Color);
     background-color: var(--#{$wizard}__nav-link--before--BackgroundColor);
     border-radius: var(--#{$wizard}__nav-link--before--BorderRadius);
-    transform: translateX(var(--#{$wizard}__nav-link--before--TranslateX));
+    transform: translateX(calc(var(--#{$wizard}__nav-link--before--TranslateX) * var(--#{$pf-global}--rtl--transform--flip)));
   }
 
   // Nav step number
@@ -528,6 +530,8 @@
 }
 
 .#{$wizard}__nav-link-toggle-icon {
+  @include pf-v5-rtl("flip-inline");
+
   display: inline-block;
   transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);
   transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));

package/docs/components/Chip/examples/Chip.md

@@ -828,7 +828,7 @@ The chip group requires the [chip component](#chip-overview). **All single chip
 
 | Attributes for closable chip group button | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"` | `.pf-v5-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
 

package/docs/components/DragDrop/examples/DragDrop.css

@@ -6,8 +6,8 @@
   --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
 
   position: absolute;
- inset-block-start: 23%;
- inset-inline-start: .5em;
+  inset-block-start: 23%;
+  inset-inline-start: .5em;
   z-index: 9999;
   width: 100%;
 }

package/docs/components/Label/examples/Label.md

@@ -3265,7 +3265,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
 | `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
 | `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
 | `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.1.0-prerelease.8",
+  "version": "5.1.0-prerelease.9",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.0.1",
-    "@patternfly/documentation-framework": "5.1.3",
+    "@patternfly/documentation-framework": "5.1.7",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.0",
     "@patternfly/react-core": "5.0.0",

package/patternfly-base-no-globals-theme-dark-unversioned.css

@@ -259,6 +259,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-theme-dark) {
@@ -490,6 +491,27 @@
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
 :where(.pf-theme-dark) {
   color-scheme: dark;
 }

package/patternfly-base-no-globals.css

@@ -259,6 +259,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-v5-theme-dark) {
@@ -490,6 +491,27 @@
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
 :where(.pf-v5-theme-dark) {
   color-scheme: dark;
 }

package/patternfly-base-theme-dark-unversioned.css

@@ -259,6 +259,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-theme-dark) {
@@ -490,6 +491,27 @@
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
 :where(html,
 body,
 p,

package/patternfly-base.css

@@ -259,6 +259,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-v5-theme-dark) {
@@ -490,6 +491,27 @@
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
 :where(html,
 body,
 p,

package/patternfly-no-globals.css

@@ -317,6 +317,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
@@ -555,6 +556,27 @@
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
 :where(.pf-v5-theme-dark) {
   color-scheme: dark;
 }
@@ -10709,7 +10731,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   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));
+  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
@@ -10809,6 +10831,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   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;
@@ -21966,6 +21992,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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);
@@ -24897,7 +24927,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
   background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
 }
 .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
-  transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
+  transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 .pf-v5-c-switch__input:checked ~ .pf-m-off {
   display: none;
@@ -30918,6 +30948,9 @@ label.pf-v5-c-tree-view__node-text {
   margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
   color: var(--pf-v5-c-wizard__toggle-separator--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__toggle-icon {
   line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -31035,7 +31068,7 @@ label.pf-v5-c-tree-view__node-text {
   color: var(--pf-v5-c-wizard__nav-link--before--Color);
   background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
   border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
-  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
+  transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 
 .pf-v5-c-wizard__nav-link::before {
@@ -31084,6 +31117,9 @@ label.pf-v5-c-tree-view__node-text {
   transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__main {
   z-index: var(--pf-v5-c-wizard__main--ZIndex);

package/patternfly-theme-dark-unversioned.css

@@ -317,6 +317,7 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--rtl--transform--flip: 1;
 }
 
 :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
@@ -555,6 +556,27 @@
   --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
+.pf-v5-m-dir-rtl {
+  direction: rtl;
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
+.pf-v5-m-dir-ltr,
+.ws-dir-ltr {
+  --pf-v5-global--rtl--transform--flip: 1;
+  direction: ltr;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
+  scale: -1 1;
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--rtl--transform--flip: -1;
+}
+
 :where(html,
 body,
 p,
@@ -10826,7 +10848,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   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));
+  transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
@@ -10926,6 +10948,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   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;
@@ -22083,6 +22109,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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);
@@ -25014,7 +25044,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
   background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
 }
 .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
-  transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
+  transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 .pf-v5-c-switch__input:checked ~ .pf-m-off {
   display: none;
@@ -31035,6 +31065,9 @@ label.pf-v5-c-tree-view__node-text {
   margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
   color: var(--pf-v5-c-wizard__toggle-separator--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__toggle-icon {
   line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -31152,7 +31185,7 @@ label.pf-v5-c-tree-view__node-text {
   color: var(--pf-v5-c-wizard__nav-link--before--Color);
   background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
   border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
-  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
+  transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
 }
 
 .pf-v5-c-wizard__nav-link::before {
@@ -31201,6 +31234,9 @@ label.pf-v5-c-tree-view__node-text {
   transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-wizard__main {
   z-index: var(--pf-v5-c-wizard__main--ZIndex);