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

package/css/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -5,7 +5,7 @@
 .ws-example-wrapper .pf-v5-c-menu,
 .ws-example-wrapper .pf-v5-c-panel {
   position: absolute;
-  top: 40px;
+ inset-block-start: 40px;
   width: 100%;
 }
 

package/css/docs/components/Tile/examples/Tile.css

@@ -2,7 +2,7 @@
 #ws-core-c-tile-extra-content .ws-preview-html .pf-v5-c-tile,
 #ws-core-c-tile-stacked-tiles .ws-preview-html .pf-v5-c-tile,
 #ws-core-c-tile-stacked-tiles-large .ws-preview-html .pf-v5-c-tile {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 #ws-core-c-tile-extra-content .ws-preview-html {

package/css/docs/demos/Card/examples/Card.css

@@ -1,5 +1,5 @@
 #ws-html-demos-c-card-status-card-expanded-with-popover {
-  padding-top: 180px;
+  padding-block-start: 180px;
 }
 
 #ws-html-demos-c-card-status-card-expanded-with-popover #carview-demo--popover-parent,
@@ -9,10 +9,10 @@
 
 #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-popover {
   position: absolute;
-  margin-top: -12px;
+  margin-block-start: -12px;
   z-index: 1000;
   transform: translateY(-50%);
-  left: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
+ inset-inline-start: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
 }
 
 #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-table {

package/css/docs/utilities/BoxShadow/examples/box-shadow.css

@@ -1,20 +1,20 @@
 .ws-core-u-box-shadow [class*="pf-v5-u-box-shadow"] {
   padding: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-block-end: var(--pf-v5-global--spacer--md);
 }
 
 #ws-core-u-box-shadow-small [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-block-end: var(--pf-v5-global--spacer--lg);
 }
 
 #ws-core-u-box-shadow-medium [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--xl);
+  margin-block-end: var(--pf-v5-global--spacer--xl);
 }
 
 #ws-core-u-box-shadow-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--2xl);
+  margin-block-end: var(--pf-v5-global--spacer--2xl);
 }
 
 #ws-core-u-box-shadow-extra-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--3xl);
+  margin-block-end: var(--pf-v5-global--spacer--3xl);
 }

package/css/layouts/Flex/flex.css

@@ -34,7 +34,7 @@
   --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
   order: var(--pf-v5-l-flex--item--Order);
   max-width: 100%;
-  margin-right: var(--pf-v5-l-flex--spacer--column);
+  margin-inline-end: var(--pf-v5-l-flex--spacer--column);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-l-flex > * {
@@ -78,28 +78,40 @@
   align-items: normal;
 }
 .pf-v5-l-flex.pf-m-column > * {
-  margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+  margin-block-start: 0;
+  margin-block-end: var(--pf-v5-l-flex--spacer--row);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-column-reverse {
   flex-direction: column-reverse;
   align-items: normal;
 }
 .pf-v5-l-flex.pf-m-column-reverse > * {
-  margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+  margin-block-start: var(--pf-v5-l-flex--spacer--row);
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-row {
   flex-direction: row;
   align-items: var(--pf-v5-l-flex--m-row--AlignItems);
 }
 .pf-v5-l-flex.pf-m-row > * {
-  margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: var(--pf-v5-l-flex--spacer--column);
 }
 .pf-v5-l-flex.pf-m-row-reverse {
   flex-direction: row-reverse;
   align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
 }
 .pf-v5-l-flex.pf-m-row-reverse > * {
-  margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-wrap {
   flex-wrap: wrap;
@@ -162,10 +174,10 @@
   align-content: space-around;
 }
 .pf-v5-l-flex > .pf-m-align-right {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .pf-v5-l-flex > .pf-m-align-left {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .pf-v5-l-flex > .pf-m-grow {
   flex-grow: 1;
@@ -175,7 +187,7 @@
 }
 .pf-v5-l-flex > .pf-m-full-width {
   width: 100%;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex > .pf-m-flex-1 {
   flex: 1 0 0;
@@ -224,28 +236,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-sm > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-sm {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-sm > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-sm {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-sm > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-sm {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-sm > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-sm {
     flex-wrap: wrap;
@@ -308,10 +332,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-sm {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-sm {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-sm {
     flex-grow: 1;
@@ -321,7 +345,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-sm {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-sm {
     flex: 1 0 0;
@@ -371,28 +395,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-md > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-md {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-md > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-md {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-md > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-md {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-md > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-md {
     flex-wrap: wrap;
@@ -455,10 +491,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-md {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-md {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-md {
     flex-grow: 1;
@@ -468,7 +504,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-md {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-md {
     flex: 1 0 0;
@@ -518,28 +554,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-lg > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-lg {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-lg > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-lg {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-lg > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-lg {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-lg > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-lg {
     flex-wrap: wrap;
@@ -602,10 +650,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-lg {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-lg {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-lg {
     flex-grow: 1;
@@ -615,7 +663,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-lg {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-lg {
     flex: 1 0 0;
@@ -665,28 +713,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-xl > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-xl {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-xl > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-xl {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-xl > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-xl {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-xl > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-xl {
     flex-wrap: wrap;
@@ -749,10 +809,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-xl {
     flex-grow: 1;
@@ -762,7 +822,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-xl {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-xl {
     flex: 1 0 0;
@@ -812,28 +872,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-2xl > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-2xl {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-2xl > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-2xl {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-2xl > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-2xl {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-2xl > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-2xl {
     flex-wrap: wrap;
@@ -896,10 +968,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-2xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-2xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-2xl {
     flex-grow: 1;
@@ -909,7 +981,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-2xl {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-2xl {
     flex: 1 0 0;

package/css/utilities/Accessibility/accessibility.css

@@ -1,7 +1,7 @@
 .pf-v5-u-screen-reader {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -23,8 +23,8 @@
 @media screen and (min-width: 576px) {
   .pf-v5-u-screen-reader-on-sm {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -51,8 +51,8 @@
 @media screen and (min-width: 768px) {
   .pf-v5-u-screen-reader-on-md {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -79,8 +79,8 @@
 @media screen and (min-width: 992px) {
   .pf-v5-u-screen-reader-on-lg {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -107,8 +107,8 @@
 @media screen and (min-width: 1200px) {
   .pf-v5-u-screen-reader-on-xl {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -135,8 +135,8 @@
 @media screen and (min-width: 1450px) {
   .pf-v5-u-screen-reader-on-2xl {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;