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

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

package/css/components/Popover/popover.js

@@ -2,21 +2,34 @@
 exports.__esModule = true;
 require('./popover.css');
 exports.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",
@@ -33,5 +46,6 @@ exports.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"
 };

package/css/components/Popover/popover.mjs

@@ -1,20 +1,33 @@
 import './popover.css';
 export 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,5 +44,6 @@ export 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"
 };

package/css/components/Skeleton/skeleton.css

@@ -66,6 +66,10 @@
   transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
   animation: var(--pf-v5-c-skeleton--after--AnimationName) var(--pf-v5-c-skeleton--after--AnimationDuration) var(--pf-v5-c-skeleton--after--AnimationTimingFunction) var(--pf-v5-c-skeleton--after--AnimationDelay) var(--pf-v5-c-skeleton--after--AnimationIterationCount);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
+  scale: -1 1;
+}
+
 .pf-v5-c-skeleton.pf-m-circle {
   --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
 }

package/css/components/Skeleton/skeleton.d.ts

@@ -1,5 +1,6 @@
 import './skeleton.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "circle": "pf-m-circle",
     "square": "pf-m-square",
@@ -29,6 +30,7 @@ declare const _default: {
     "textSm": "pf-m-text-sm"
   },
   "skeleton": "pf-v5-c-skeleton",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Skeleton/skeleton.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./skeleton.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "circle": "pf-m-circle",
     "square": "pf-m-square",
@@ -31,5 +32,6 @@ exports.default = {
     "textSm": "pf-m-text-sm"
   },
   "skeleton": "pf-v5-c-skeleton",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Skeleton/skeleton.mjs

@@ -1,5 +1,6 @@
 import './skeleton.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "circle": "pf-m-circle",
     "square": "pf-m-square",
@@ -29,5 +30,6 @@ export default {
     "textSm": "pf-m-text-sm"
   },
   "skeleton": "pf-v5-c-skeleton",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Slider/slider.css

@@ -1,5 +1,6 @@
 .pf-v5-c-slider {
   --pf-v5-c-slider--value: 0;
+  --pf-v5-c-slider__step--Left: 0;
   --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -7,6 +8,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 +60,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 +95,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 +124,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 +132,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 +158,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 +172,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 +192,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/Table/table-scrollable.css

@@ -32,10 +32,10 @@
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
   --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
   --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
 }
 

package/css/components/Table/table-scrollable.d.ts

@@ -4,7 +4,9 @@ declare const _default: {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
     "right": "pf-m-right",
-    "left": "pf-m-left"
+    "inlineEnd": "pf-m-inline-end",
+    "left": "pf-m-left",
+    "inlineStart": "pf-m-inline-start"
   },
   "scrollInnerWrapper": "pf-v5-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-v5-c-scroll-outer-wrapper",

package/css/components/Table/table-scrollable.js

@@ -6,7 +6,9 @@ exports.default = {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
     "right": "pf-m-right",
-    "left": "pf-m-left"
+    "inlineEnd": "pf-m-inline-end",
+    "left": "pf-m-left",
+    "inlineStart": "pf-m-inline-start"
   },
   "scrollInnerWrapper": "pf-v5-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-v5-c-scroll-outer-wrapper",

package/css/components/Table/table-scrollable.mjs

@@ -4,7 +4,9 @@ export default {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
     "right": "pf-m-right",
-    "left": "pf-m-left"
+    "inlineEnd": "pf-m-inline-end",
+    "left": "pf-m-left",
+    "inlineStart": "pf-m-inline-start"
   },
   "scrollInnerWrapper": "pf-v5-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-v5-c-scroll-outer-wrapper",

package/css/components/Table/table-tree-view.css

@@ -65,10 +65,14 @@
   cursor: pointer;
 }
 .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
+  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
   position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
   inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
-  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
+  transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
   min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
 }

package/css/components/Table/table-tree-view.d.ts

@@ -1,5 +1,6 @@
 import './table-tree-view.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdown": "pf-v5-c-dropdown",
   "modifiers": {
     "treeView": "pf-m-tree-view",
@@ -26,6 +27,7 @@ declare const _default: {
   "tableTreeViewMain": "pf-v5-c-table__tree-view-main",
   "tableTreeViewText": "pf-v5-c-table__tree-view-text",
   "tableTreeViewTitleCell": "pf-v5-c-table__tree-view-title-cell",
-  "tableTreeViewTitleHeaderCell": "pf-v5-c-table__tree-view-title-header-cell"
+  "tableTreeViewTitleHeaderCell": "pf-v5-c-table__tree-view-title-header-cell",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Table/table-tree-view.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./table-tree-view.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdown": "pf-v5-c-dropdown",
   "modifiers": {
     "treeView": "pf-m-tree-view",
@@ -28,5 +29,6 @@ exports.default = {
   "tableTreeViewMain": "pf-v5-c-table__tree-view-main",
   "tableTreeViewText": "pf-v5-c-table__tree-view-text",
   "tableTreeViewTitleCell": "pf-v5-c-table__tree-view-title-cell",
-  "tableTreeViewTitleHeaderCell": "pf-v5-c-table__tree-view-title-header-cell"
+  "tableTreeViewTitleHeaderCell": "pf-v5-c-table__tree-view-title-header-cell",
+  "wsDirRtl": "ws-dir-rtl"
 };