@patternfly/patternfly 5.1.0-prerelease.11 → 5.1.0-prerelease.13

package/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/components/Alert/alert.scss

@@ -199,6 +199,8 @@
 }
 
 .#{$alert}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   display: inline-block;
   transition: var(--#{$alert}__toggle-icon--Transition);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));

package/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/components/Breadcrumb/breadcrumb.scss

@@ -58,6 +58,8 @@
 
 // Breadcrumb divider
 .#{$breadcrumb}__item-divider {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);
   line-height: 1;

package/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/components/CalendarMonth/calendar-month.scss

@@ -81,6 +81,8 @@
 }
 
 .#{$calendar-month}__header-nav-control {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
   margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);
 

package/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/components/ClipboardCopy/clipboard-copy.scss

@@ -66,6 +66,8 @@
 }
 
 .#{$clipboard-copy}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
 }
 

package/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/components/Menu/menu.scss

@@ -282,7 +282,11 @@
       // target first list in menu
       > .#{$menu}__content > .#{$menu}__list,
       > .#{$menu}__list {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );    
       }
       // stylelint-enable
     }
@@ -299,7 +303,11 @@
 
       // stylelint-disable selector-max-class
       &.pf-m-drilled-in {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );
       }
       // stylelint-enable
     }
@@ -686,6 +694,8 @@
 
 // Toggle icon
 .#{$menu}__item-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
   padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
   color: var(--#{$menu}__item-toggle-icon, inherit);

package/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/components/Nav/nav.scss

@@ -508,6 +508,8 @@
   }
 
   .#{$menu}__item-toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     margin-inline-start: calc(var(--#{$menu}__item-toggle-icon--PaddingLeft) * -1);
   }
 
@@ -1064,6 +1066,8 @@
   display: inline-block;
   transition: var(--#{$nav}__toggle-icon--Transition);
 
+  @include pf-v5-mirror-inline-on-rtl;
+
   .#{$nav}__item.pf-m-expanded & {
     transform: rotate(var(--#{$nav}__item--m-expanded__toggle-icon--Rotate));
   }
@@ -1132,6 +1136,12 @@
   opacity: 0;
   transition: var(--#{$nav}__scroll-button--Transition);
 
+  // Mirror only the contents to avoid flipping the borders
+  // TODO at breaking change, add an icon wrapper to be mirrored
+  > * {
+    @include pf-v5-mirror-inline-on-rtl;
+  }
+
   &::before {
     position: absolute;
     inset-block-start: 0;
@@ -1163,8 +1173,13 @@
     --#{$nav}__scroll-button--before--BorderRightWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-end: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(-100%);
 
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(-100%),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+    );
+  
     &::before {
      inset-inline-end: 0;
     }
@@ -1174,7 +1189,12 @@
     --#{$nav}__scroll-button--before--BorderLeftWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-start: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(100%);
+
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(100%),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(100%)})
+    );
 
     &::before {
      inset-inline-start: 0;

package/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/components/NotificationDrawer/notification-drawer.scss

@@ -307,6 +307,8 @@
 }
 
 .#{$notification-drawer}__group-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
   color: var(--#{$notification-drawer}__group-toggle-icon--Color);
   transition: var(--#{$notification-drawer}__group-toggle-icon--Transition);

package/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/components/Page/page.scss

@@ -404,7 +404,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
   transition: var(--#{$page}__sidebar--Transition);
-  transform: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ));
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
+  );
 
   // Mobile
   // Expanded nav

package/docs/components/Toolbar/examples/Toolbar.md

@@ -3416,22 +3416,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
           </div>
 
           <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to first page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to previous page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-left" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-first">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to first page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-prev">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to previous page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-left" aria-hidden="true"></i>
+              </button>
+            </div>
 
             <div
               class="pf-v5-c-pagination__nav-page-select"
@@ -3448,20 +3452,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               </span>
               <span aria-hidden="true">of 4</span>
             </div>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to next page"
-            >
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to last page"
-            >
-              <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-next">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to next page"
+              >
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-last">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to last page"
+              >
+                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
@@ -3959,22 +3967,26 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
           </div>
 
           <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to first page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-double-left" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain pf-m-disabled"
-              type="button"
-              aria-label="Go to previous page"
-              aria-disabled="true"
-            >
-              <i class="fas fa-angle-left" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-first">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to first page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-prev">
+              <button
+                class="pf-v5-c-button pf-m-plain pf-m-disabled"
+                type="button"
+                aria-label="Go to previous page"
+                aria-disabled="true"
+              >
+                <i class="fas fa-angle-left" aria-hidden="true"></i>
+              </button>
+            </div>
 
             <div
               class="pf-v5-c-pagination__nav-page-select"
@@ -3991,20 +4003,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               </span>
               <span aria-hidden="true">of 4</span>
             </div>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to next page"
-            >
-              <i class="fas fa-angle-right" aria-hidden="true"></i>
-            </button>
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Go to last page"
-            >
-              <i class="fas fa-angle-double-right" aria-hidden="true"></i>
-            </button>
+            <div class="pf-v5-c-pagination__nav-control pf-m-next">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to next page"
+              >
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="pf-v5-c-pagination__nav-control pf-m-last">
+              <button
+                class="pf-v5-c-button pf-m-plain"
+                type="button"
+                aria-label="Go to last page"
+              >
+                <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+              </button>
+            </div>
           </nav>
         </div>
       </div>

package/docs/demos/Card/examples/Card.md

@@ -387,8 +387,8 @@ wrapperTag: div
 <div class="pf-v5-c-card pf-m-flat" id="card-demo-horizontal-split-example">
   <div class="pf-v5-l-grid pf-m-all-6-col-on-md">
     <div
-      class="pf-v5-l-grid__item pf-d-card__media-item"
-      style="min-height: 200px; background: center / cover url('/assets/images/pfbg_992@2x.jpg'); "
+      class="pf-v5-l-grid__item"
+      style="min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pfbg-icon.svg) black;"
     ></div>
     <div class="pf-v5-l-grid__item">
       <div class="pf-v5-c-card__title">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.1.0-prerelease.11",
+  "version": "5.1.0-prerelease.13",
   "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.7",
+    "@patternfly/documentation-framework": "5.1.10",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.0",
     "@patternfly/react-core": "5.0.0",

package/patternfly-no-globals.css

@@ -5967,6 +5967,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;
@@ -6929,6 +6932,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;
@@ -7615,6 +7621,10 @@ button.pf-v5-c-breadcrumb__link {
   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);
@@ -8506,6 +8516,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 .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);
@@ -17853,6 +17866,10 @@ ul.pf-v5-c-list {
 .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;
@@ -17864,6 +17881,10 @@ ul.pf-v5-c-list {
 .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;
@@ -18163,6 +18184,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);
@@ -19486,6 +19510,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 .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;
 }
@@ -19929,6 +19957,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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));
 }
@@ -19984,6 +20016,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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;
@@ -20011,6 +20047,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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;
 }
@@ -20019,6 +20059,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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;
 }
@@ -20453,6 +20497,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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));
 }
@@ -21154,6 +21202,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   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);