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

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;

package/css/components/Pagination/pagination.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./pagination.css');
 exports.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": {
@@ -67,5 +68,6 @@ exports.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"
 };

package/css/components/Pagination/pagination.mjs

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

package/css/components/Slider/slider.css

@@ -7,6 +7,7 @@
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
   --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
+  --pf-v5-c-slider__rail-track--before--fill--direction: right;
   --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
   --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -58,6 +59,10 @@
   --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
   display: flex;
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
+  --pf-v5-c-slider__rail-track--before--fill--direction: left;
+}
+
 .pf-v5-c-slider.pf-m-disabled {
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
   --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -89,7 +94,7 @@
   position: absolute;
   inset: 0;
   content: "";
-  background: linear-gradient(to right, var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
+  background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
   border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
 }
 
@@ -118,6 +123,7 @@
 }
 
 .pf-v5-c-slider__step-tick {
+  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
   position: absolute;
   inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
   inset-inline-start: 0;
@@ -125,17 +131,23 @@
   height: var(--pf-v5-c-slider__step-tick--Height);
   background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
   border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
-  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
+  transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-slider__step-label {
+  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
   position: absolute;
   inset-block-start: var(--pf-v5-c-slider__step-label--Top);
   word-break: normal;
-  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
+  transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-slider__thumb {
+  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
   position: absolute;
   inset-block-start: var(--pf-v5-c-slider__thumb--Top);
   inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
@@ -145,9 +157,13 @@
   background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
   border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
   box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
-  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
+  transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
+}
+
 .pf-v5-c-slider__thumb::before {
+  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -155,8 +171,11 @@
   height: var(--pf-v5-c-slider__thumb--before--Height);
   content: "";
   border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
-  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
+  transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
+}
+
 .pf-v5-c-slider__thumb:hover {
   --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
 }
@@ -172,13 +191,17 @@
   margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
 }
 .pf-v5-c-slider__value.pf-m-floating {
+  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
   --pf-v5-c-slider__value--MarginLeft: 0;
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
   z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
-  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
+  transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
+}
+
 .pf-v5-c-slider__value .pf-v5-c-form-control {
   width: var(--pf-v5-c-slider__value--c-form-control--Width);
 }

package/css/components/Slider/slider.d.ts

@@ -1,5 +1,6 @@
 import './slider.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
@@ -16,6 +17,7 @@ declare const _default: {
   "sliderStepTick": "pf-v5-c-slider__step-tick",
   "sliderSteps": "pf-v5-c-slider__steps",
   "sliderThumb": "pf-v5-c-slider__thumb",
-  "sliderValue": "pf-v5-c-slider__value"
+  "sliderValue": "pf-v5-c-slider__value",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Slider/slider.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./slider.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
@@ -18,5 +19,6 @@ exports.default = {
   "sliderStepTick": "pf-v5-c-slider__step-tick",
   "sliderSteps": "pf-v5-c-slider__steps",
   "sliderThumb": "pf-v5-c-slider__thumb",
-  "sliderValue": "pf-v5-c-slider__value"
+  "sliderValue": "pf-v5-c-slider__value",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Slider/slider.mjs

@@ -1,5 +1,6 @@
 import './slider.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "formControl": "pf-v5-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
@@ -16,5 +17,6 @@ export default {
   "sliderStepTick": "pf-v5-c-slider__step-tick",
   "sliderSteps": "pf-v5-c-slider__steps",
   "sliderThumb": "pf-v5-c-slider__thumb",
-  "sliderValue": "pf-v5-c-slider__value"
+  "sliderValue": "pf-v5-c-slider__value",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Switch/switch.css

@@ -69,6 +69,10 @@
 .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
   transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
+  transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-switch__input:checked ~ .pf-m-off {
   display: none;
 }

package/css/components/Switch/switch.d.ts

@@ -1,5 +1,6 @@
 import './switch.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "reverse": "pf-m-reverse",
     "off": "pf-m-off",
@@ -10,6 +11,7 @@ declare const _default: {
   "switchLabel": "pf-v5-c-switch__label",
   "switchToggle": "pf-v5-c-switch__toggle",
   "switchToggleIcon": "pf-v5-c-switch__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Switch/switch.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./switch.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "reverse": "pf-m-reverse",
     "off": "pf-m-off",
@@ -12,5 +13,6 @@ exports.default = {
   "switchLabel": "pf-v5-c-switch__label",
   "switchToggle": "pf-v5-c-switch__toggle",
   "switchToggleIcon": "pf-v5-c-switch__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Switch/switch.mjs

@@ -1,5 +1,6 @@
 import './switch.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "reverse": "pf-m-reverse",
     "off": "pf-m-off",
@@ -10,5 +11,6 @@ export default {
   "switchLabel": "pf-v5-c-switch__label",
   "switchToggle": "pf-v5-c-switch__toggle",
   "switchToggleIcon": "pf-v5-c-switch__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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);
@@ -407,6 +410,7 @@
   border: 0;
 }
 .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
+  transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
   position: absolute;
   inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
   inset-inline-start: 0;
@@ -420,7 +424,9 @@
   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));
+}
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
+  transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-wizard__nav-link::before {
@@ -469,6 +475,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/css/components/Wizard/wizard.d.ts

@@ -1,6 +1,7 @@
 import './wizard.css';
 declare const _default: {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "modalBox": "pf-v5-c-modal-box",
   "modifiers": {
@@ -37,6 +38,7 @@ declare const _default: {
   "wizardToggleList": "pf-v5-c-wizard__toggle-list",
   "wizardToggleListItem": "pf-v5-c-wizard__toggle-list-item",
   "wizardToggleNum": "pf-v5-c-wizard__toggle-num",
-  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator"
+  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Wizard/wizard.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./wizard.css');
 exports.default = {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "modalBox": "pf-v5-c-modal-box",
   "modifiers": {
@@ -39,5 +40,6 @@ exports.default = {
   "wizardToggleList": "pf-v5-c-wizard__toggle-list",
   "wizardToggleListItem": "pf-v5-c-wizard__toggle-list-item",
   "wizardToggleNum": "pf-v5-c-wizard__toggle-num",
-  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator"
+  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Wizard/wizard.mjs

@@ -1,6 +1,7 @@
 import './wizard.css';
 export default {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "drawer": "pf-v5-c-drawer",
   "modalBox": "pf-v5-c-modal-box",
   "modifiers": {
@@ -37,5 +38,6 @@ export default {
   "wizardToggleList": "pf-v5-c-wizard__toggle-list",
   "wizardToggleListItem": "pf-v5-c-wizard__toggle-list-item",
   "wizardToggleNum": "pf-v5-c-wizard__toggle-num",
-  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator"
+  "wizardToggleSeparator": "pf-v5-c-wizard__toggle-separator",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/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/css/docs/components/Nav/examples/Navigation.css

@@ -1,32 +1,9 @@
-#ws-core-c-navigation-default,
-#ws-core-c-navigation-basic,
-#ws-core-c-navigation-grouped,
-#ws-core-c-navigation-grouped-nav,
-#ws-core-c-navigation-grouped-nav-no-titles,
-#ws-core-c-navigation-expanded,
-#ws-core-c-navigation-expanded-with-subnav-titles,
-#ws-core-c-navigation-mixed,
-#ws-core-c-navigation-horizontal,
-#ws-core-c-navigation-horizontal-overflow,
-#ws-core-c-navigation-horizontal-subnav,
-#ws-core-c-navigation-horizontal-subnav-overflow,
-#ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
-#ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
-#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
-  padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .ws-preview-html {
   background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,
 #ws-core-c-navigation-horizontal-in-masthead-overflow {
-  padding: 0;
   grid-template-rows: auto;
 }
 
@@ -58,6 +35,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
- inset-block-start: 168px;
- inset-inline-start: 256px;
+  inset-block-start: 168px;
+  inset-inline-start: 256px;
 }

package/css/docs/components/Nav/examples/Navigation.d.ts

@@ -5,9 +5,9 @@ declare const _default: {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-v5-c-nav",
   "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
+  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Nav/examples/Navigation.js

@@ -7,8 +7,8 @@ exports.default = {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-v5-c-nav",
   "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
+  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Nav/examples/Navigation.mjs

@@ -5,8 +5,8 @@ export default {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-v5-c-nav",
   "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
+  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.1.1-prerelease.1",
+  "version": "5.1.1-prerelease.2",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -18,7 +18,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.8",
+    "@patternfly/patternfly": "5.1.0-prerelease.13",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -28,5 +28,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "1e1305e5f7450e087ff8d1690d2be28b00dac0a1"
+  "gitHead": "52cbf11e7e407d70d674a160da7f432d197c5f57"
 }