@patternfly/react-styles 5.1.1-prerelease.6 → 5.1.1-prerelease.8

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.1.1-prerelease.8 (2023-10-03)
+
+### Bug Fixes
+
+- whitespace changes to trigger prereleases ([#9702](https://github.com/patternfly/patternfly-react/issues/9702)) ([741c248](https://github.com/patternfly/patternfly-react/commit/741c24825b503e116c77cf304aa3e4e3a9ff7841))
+
+## 5.1.1-prerelease.7 (2023-09-21)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 ## 5.1.1-prerelease.6 (2023-09-18)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/README.md

@@ -2,7 +2,7 @@
 
 Library that provides CSS-in-JS capabilities 
 
-#### Example
+#### Example 
 
 ```jsx
 import { css } from '@patternfly/react-styles';

package/css/components/Button/button.css

@@ -432,6 +432,9 @@
   color: var(--pf-v5-c-button--m-plain--Color);
   background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
 }
+.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
+  padding: 0;
+}
 .pf-v5-c-button.pf-m-plain:hover {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);

package/css/components/Button/button.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     "control": "pf-m-control",
     "expanded": "pf-m-expanded",
     "plain": "pf-m-plain",
+    "noPadding": "pf-m-no-padding",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "progress": "pf-m-progress",

package/css/components/Button/button.js

@@ -23,6 +23,7 @@ exports.default = {
     "control": "pf-m-control",
     "expanded": "pf-m-expanded",
     "plain": "pf-m-plain",
+    "noPadding": "pf-m-no-padding",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "progress": "pf-m-progress",

package/css/components/Button/button.mjs

@@ -21,6 +21,7 @@ export default {
     "control": "pf-m-control",
     "expanded": "pf-m-expanded",
     "plain": "pf-m-plain",
+    "noPadding": "pf-m-no-padding",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "progress": "pf-m-progress",

package/css/components/Card/card.css

@@ -36,7 +36,7 @@
   --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
-  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);

package/css/components/Popover/popover.css

@@ -63,85 +63,59 @@
 }
 .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-m-top-right) {
+  --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
+  --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
 }
-:where(.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));
-}
-:where(.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-m-bottom-right) {
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
+  --pf-v5-c-popover__arrow--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));
-}
-:where(.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-m-left-bottom) {
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
+  --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
+  --pf-v5-c-popover__arrow--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));
-}
-:where(.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-m-right-bottom) {
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
+  --pf-v5-c-popover__arrow--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-m-right-top) {
+  --pf-v5-c-popover__arrow--Top: 0;
+  --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
 }
 .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-m-right-bottom) {
+  --pf-v5-c-popover__arrow--Top: auto;
+  --pf-v5-c-popover__arrow--Bottom: 0;
 }
 .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-m-bottom-left) {
+  --pf-v5-c-popover__arrow--Left: 0;
+  --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
 }
 .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;
+.pf-m-bottom-right) {
+  --pf-v5-c-popover__arrow--Right: 0;
+  --pf-v5-c-popover__arrow--Left: auto;
 }
 .pf-v5-c-popover.pf-m-danger {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -184,11 +158,18 @@
 
 .pf-v5-c-popover__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--pf-v5-c-popover__arrow--Top, auto);
+  right: var(--pf-v5-c-popover__arrow--Right, auto);
+  bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
+  left: var(--pf-v5-c-popover__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--pf-v5-c-popover__arrow--Width);
   height: var(--pf-v5-c-popover__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
+  transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
 }
 
 .pf-v5-c-popover__header {

package/css/components/Popover/popover.d.ts

@@ -1,33 +1,20 @@
 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",

package/css/components/Popover/popover.js

@@ -2,34 +2,21 @@
 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",

package/css/components/Popover/popover.mjs

@@ -1,33 +1,20 @@
 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",

package/css/components/Tooltip/tooltip.css

@@ -30,85 +30,59 @@
 }
 .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-m-top-right) {
+  --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
 }
-:where(.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));
-}
-:where(.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-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
+  --pf-v5-c-tooltip__arrow--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));
-}
-:where(.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-m-left-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
+  --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
+  --pf-v5-c-tooltip__arrow--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));
-}
-:where(.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-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
+  --pf-v5-c-tooltip__arrow--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-m-right-top) {
+  --pf-v5-c-tooltip__arrow--Top: 0;
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
 }
 .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-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: auto;
+  --pf-v5-c-tooltip__arrow--Bottom: 0;
 }
 .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-m-bottom-left) {
+  --pf-v5-c-tooltip__arrow--Left: 0;
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
 }
 .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;
+.pf-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Right: 0;
+  --pf-v5-c-tooltip__arrow--Left: auto;
 }
 
 .pf-v5-c-tooltip__content {
@@ -123,17 +97,24 @@
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
 }
-.pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
+.pf-v5-c-tooltip__content.pf-m-text-align-left {
   text-align: start;
 }
 
 .pf-v5-c-tooltip__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--pf-v5-c-tooltip__arrow--Top, auto);
+  right: var(--pf-v5-c-tooltip__arrow--Right, auto);
+  bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
+  left: var(--pf-v5-c-tooltip__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--pf-v5-c-tooltip__arrow--Width);
   height: var(--pf-v5-c-tooltip__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
+  transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-tooltip {

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

@@ -1,37 +1,19 @@
 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",
-    "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"
+    "textAlignLeft": "pf-m-text-align-left"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",

package/css/components/Tooltip/tooltip.js

@@ -2,38 +2,20 @@
 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",
-    "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"
+    "textAlignLeft": "pf-m-text-align-left"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",

package/css/components/Tooltip/tooltip.mjs

@@ -1,37 +1,19 @@
 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",
-    "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"
+    "textAlignLeft": "pf-m-text-align-left"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",

package/css/docs/components/Menu/examples/Menu.css

@@ -16,3 +16,11 @@
   align-items: flex-end;
   justify-content: flex-end;
 }
+
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) {
+  position: relative;
+}
+
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v5-c-breadcrumb__dropdown .pf-v5-c-menu {
+  position: absolute;
+}

package/css/docs/components/Menu/examples/Menu.d.ts

@@ -1,3 +1,6 @@
 import './Menu.css';
-declare const _default: {};
+declare const _default: {
+  "breadcrumbDropdown": "pf-v5-c-breadcrumb__dropdown",
+  "menu": "pf-v5-c-menu"
+};
 export default _default;

package/css/docs/components/Menu/examples/Menu.js

@@ -1,4 +1,7 @@
 "use strict";
 exports.__esModule = true;
 require('./Menu.css');
-exports.default = {};
+exports.default = {
+  "breadcrumbDropdown": "pf-v5-c-breadcrumb__dropdown",
+  "menu": "pf-v5-c-menu"
+};

package/css/docs/components/Menu/examples/Menu.mjs

@@ -1,2 +1,5 @@
 import './Menu.css';
-export default {};
+export default {
+  "breadcrumbDropdown": "pf-v5-c-breadcrumb__dropdown",
+  "menu": "pf-v5-c-menu"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.1.1-prerelease.6",
+  "version": "5.1.1-prerelease.8",
   "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.28",
+    "@patternfly/patternfly": "5.1.0-prerelease.32",
     "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": "f856af105070fec983e76afa262b37aa99737e63"
+  "gitHead": "7767e6a96195dffbf155c7608d9aad0c14303f03"
 }