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

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

@@ -1,5 +1,6 @@
 import './table-tree-view.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdown": "pf-v5-c-dropdown",
   "modifiers": {
     "treeView": "pf-m-tree-view",
@@ -26,5 +27,6 @@ export 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"
 };

package/css/components/Table/table.css

@@ -734,6 +734,10 @@
   transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-table__toggle svg {
   pointer-events: none;
 }

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

@@ -2,6 +2,7 @@ import './table.css';
 declare const _default: {
   "button": "pf-v5-c-button",
   "checkInput": "pf-v5-c-check__input",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -84,6 +85,7 @@ declare const _default: {
   "tableToggle": "pf-v5-c-table__toggle",
   "tableToggleIcon": "pf-v5-c-table__toggle-icon",
   "tableTr": "pf-v5-c-table__tr",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Table/table.js

@@ -4,6 +4,7 @@ require('./table.css');
 exports.default = {
   "button": "pf-v5-c-button",
   "checkInput": "pf-v5-c-check__input",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -86,5 +87,6 @@ exports.default = {
   "tableToggle": "pf-v5-c-table__toggle",
   "tableToggleIcon": "pf-v5-c-table__toggle-icon",
   "tableTr": "pf-v5-c-table__tr",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Table/table.mjs

@@ -2,6 +2,7 @@ import './table.css';
 export default {
   "button": "pf-v5-c-button",
   "checkInput": "pf-v5-c-check__input",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -84,5 +85,6 @@ export default {
   "tableToggle": "pf-v5-c-table__toggle",
   "tableToggleIcon": "pf-v5-c-table__toggle-icon",
   "tableTr": "pf-v5-c-table__tr",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Tabs/tabs.css

@@ -417,6 +417,9 @@
   transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tabs__toggle-text {
   margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -591,6 +594,9 @@
   transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tabs__item-action {
   display: flex;
@@ -622,6 +628,10 @@
   opacity: 0;
   transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
   --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
 }

package/css/components/Tabs/tabs.d.ts

@@ -1,6 +1,7 @@
 import './tabs.css';
 declare const _default: {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "fill": "pf-m-fill",
     "scrollable": "pf-m-scrollable",
@@ -81,6 +82,7 @@ declare const _default: {
   "tabsToggleButton": "pf-v5-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-v5-c-tabs__toggle-icon",
   "tabsToggleText": "pf-v5-c-tabs__toggle-text",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Tabs/tabs.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./tabs.css');
 exports.default = {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "fill": "pf-m-fill",
     "scrollable": "pf-m-scrollable",
@@ -83,5 +84,6 @@ exports.default = {
   "tabsToggleButton": "pf-v5-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-v5-c-tabs__toggle-icon",
   "tabsToggleText": "pf-v5-c-tabs__toggle-text",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Tabs/tabs.mjs

@@ -1,6 +1,7 @@
 import './tabs.css';
 export default {
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "fill": "pf-m-fill",
     "scrollable": "pf-m-scrollable",
@@ -81,5 +82,6 @@ export default {
   "tabsToggleButton": "pf-v5-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-v5-c-tabs__toggle-icon",
   "tabsToggleText": "pf-v5-c-tabs__toggle-text",
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Tooltip/tooltip.css

@@ -28,37 +28,85 @@
   max-width: var(--pf-v5-c-tooltip--MaxWidth);
   box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
 }
-.pf-v5-c-tooltip.pf-m-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow {
+.pf-v5-c-tooltip: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-tooltip__arrow {
   inset-block-end: 0;
   inset-inline-start: 50%;
   transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
 }
-.pf-v5-c-tooltip.pf-m-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip: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-tooltip__arrow {
+  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
+}
+
+.pf-v5-c-tooltip: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-tooltip__arrow {
   inset-block-start: 0;
   inset-inline-start: 50%;
   transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
 }
-.pf-v5-c-tooltip.pf-m-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip: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-tooltip__arrow {
+  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
+}
+
+.pf-v5-c-tooltip: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-tooltip__arrow {
   inset-block-start: 50%;
   inset-inline-end: 0;
   transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
 }
-.pf-v5-c-tooltip.pf-m-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip: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-tooltip__arrow {
+  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
+}
+
+.pf-v5-c-tooltip: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-tooltip__arrow {
   inset-block-start: 50%;
   inset-inline-start: 0;
   transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
 }
-.pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow {
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip: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-tooltip__arrow {
+  transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
+}
+
+.pf-v5-c-tooltip:is(.pf-m-left-top,
+.pf-m-right-top,
+.pf-m-inline-start-block-start,
+.pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
   inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
 }
-.pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
+.pf-v5-c-tooltip:is(.pf-m-left-bottom,
+.pf-m-right-bottom,
+.pf-m-inline-start-block-end,
+.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
   inset-block-start: auto;
   inset-block-end: 0;
 }
-.pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow {
+.pf-v5-c-tooltip:is(.pf-m-top-left,
+.pf-m-bottom-left,
+.pf-m-block-start-block-start,
+.pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
   inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
 }
-.pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
+.pf-v5-c-tooltip:is(.pf-m-top-right,
+.pf-m-bottom-right,
+.pf-m-block-start-block-end,
+.pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
   inset-inline-start: auto;
   inset-inline-end: 0;
 }
@@ -75,7 +123,7 @@
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
 }
-.pf-v5-c-tooltip__content.pf-m-text-align-left {
+.pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
   text-align: start;
 }
 

package/css/components/Tooltip/tooltip.d.ts

@@ -1,23 +1,42 @@
 import './tooltip.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "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",
-    "textAlignLeft": "pf-m-text-align-left"
+    "inlineEnd": "pf-m-inline-end",
+    "inlineEndBlockStart": "pf-m-inline-end-block-start",
+    "inlineEndBlockEnd": "pf-m-inline-end-block-end",
+    "blockStartBlockStart": "pf-m-block-start-block-start",
+    "blockEndBlockStart": "pf-m-block-end-block-start",
+    "blockStartBlockEnd": "pf-m-block-start-block-end",
+    "blockEndBlockEnd": "pf-m-block-end-block-end",
+    "textAlignLeft": "pf-m-text-align-left",
+    "textAlignStart": "pf-m-text-align-start"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
-  "tooltipContent": "pf-v5-c-tooltip__content"
+  "tooltipContent": "pf-v5-c-tooltip__content",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Tooltip/tooltip.js

@@ -2,23 +2,42 @@
 exports.__esModule = true;
 require('./tooltip.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "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",
-    "textAlignLeft": "pf-m-text-align-left"
+    "inlineEnd": "pf-m-inline-end",
+    "inlineEndBlockStart": "pf-m-inline-end-block-start",
+    "inlineEndBlockEnd": "pf-m-inline-end-block-end",
+    "blockStartBlockStart": "pf-m-block-start-block-start",
+    "blockEndBlockStart": "pf-m-block-end-block-start",
+    "blockStartBlockEnd": "pf-m-block-start-block-end",
+    "blockEndBlockEnd": "pf-m-block-end-block-end",
+    "textAlignLeft": "pf-m-text-align-left",
+    "textAlignStart": "pf-m-text-align-start"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
-  "tooltipContent": "pf-v5-c-tooltip__content"
+  "tooltipContent": "pf-v5-c-tooltip__content",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Tooltip/tooltip.mjs

@@ -1,22 +1,41 @@
 import './tooltip.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "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",
-    "textAlignLeft": "pf-m-text-align-left"
+    "inlineEnd": "pf-m-inline-end",
+    "inlineEndBlockStart": "pf-m-inline-end-block-start",
+    "inlineEndBlockEnd": "pf-m-inline-end-block-end",
+    "blockStartBlockStart": "pf-m-block-start-block-start",
+    "blockEndBlockStart": "pf-m-block-end-block-start",
+    "blockStartBlockEnd": "pf-m-block-start-block-end",
+    "blockEndBlockEnd": "pf-m-block-end-block-end",
+    "textAlignLeft": "pf-m-text-align-left",
+    "textAlignStart": "pf-m-text-align-start"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
-  "tooltipContent": "pf-v5-c-tooltip__content"
+  "tooltipContent": "pf-v5-c-tooltip__content",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/TreeView/tree-view.css

@@ -229,6 +229,9 @@
   transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
   --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -318,6 +321,9 @@
   border: 0;
   transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
+  transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
 
 .pf-v5-c-tree-view__node-title.pf-m-truncate,
 .pf-v5-c-tree-view__node-text.pf-m-truncate {

package/css/components/TreeView/tree-view.d.ts

@@ -1,6 +1,7 @@
 import './tree-view.css';
 declare const _default: {
   "badge": "pf-v5-c-badge",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
     "guides": "pf-m-guides",
@@ -26,6 +27,7 @@ declare const _default: {
   "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
   "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
   "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
-  "treeViewSearch": "pf-v5-c-tree-view__search"
+  "treeViewSearch": "pf-v5-c-tree-view__search",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/TreeView/tree-view.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./tree-view.css');
 exports.default = {
   "badge": "pf-v5-c-badge",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
     "guides": "pf-m-guides",
@@ -28,5 +29,6 @@ exports.default = {
   "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
   "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
   "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
-  "treeViewSearch": "pf-v5-c-tree-view__search"
+  "treeViewSearch": "pf-v5-c-tree-view__search",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/TreeView/tree-view.mjs

@@ -1,6 +1,7 @@
 import './tree-view.css';
 export default {
   "badge": "pf-v5-c-badge",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
     "guides": "pf-m-guides",
@@ -26,5 +27,6 @@ export default {
   "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
   "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
   "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
-  "treeViewSearch": "pf-v5-c-tree-view__search"
+  "treeViewSearch": "pf-v5-c-tree-view__search",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Truncate/truncate.css

@@ -21,14 +21,23 @@
 .pf-v5-c-truncate__end {
   direction: rtl;
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+  direction: ltr;
+}
 
 .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
   overflow: visible;
   direction: ltr;
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
+  direction: rtl;
+}
 
 @supports (-webkit-hyphens: none) {
   .pf-v5-c-truncate__end {
     direction: ltr;
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+    direction: rtl;
+  }
 }

package/css/components/Truncate/truncate.d.ts

@@ -1,7 +1,9 @@
 import './truncate.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "truncate": "pf-v5-c-truncate",
   "truncateEnd": "pf-v5-c-truncate__end",
-  "truncateStart": "pf-v5-c-truncate__start"
+  "truncateStart": "pf-v5-c-truncate__start",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Truncate/truncate.js

@@ -2,7 +2,9 @@
 exports.__esModule = true;
 require('./truncate.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "truncate": "pf-v5-c-truncate",
   "truncateEnd": "pf-v5-c-truncate__end",
-  "truncateStart": "pf-v5-c-truncate__start"
+  "truncateStart": "pf-v5-c-truncate__start",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Truncate/truncate.mjs

@@ -1,6 +1,8 @@
 import './truncate.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "truncate": "pf-v5-c-truncate",
   "truncateEnd": "pf-v5-c-truncate__end",
-  "truncateStart": "pf-v5-c-truncate__start"
+  "truncateStart": "pf-v5-c-truncate__start",
+  "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/ModalBox/examples/ModalBox.css

@@ -1,10 +1,4 @@
 .ws-core-c-modal .ws-preview-html {
-  position: relative;
-}
-
-.ws-core-c-modal .pf-v5-c-modal-box {
-  position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
+  display: grid;
+  place-items: center;
 }