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

package/css/components/CodeBlock/code-block.css

@@ -13,16 +13,19 @@
 
 .pf-v5-c-code-block__header {
   display: flex;
-  border-bottom: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
 }
 
 .pf-v5-c-code-block__actions {
   display: flex;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .pf-v5-c-code-block__content {
-  padding: var(--pf-v5-c-code-block__content--PaddingTop) var(--pf-v5-c-code-block__content--PaddingRight) var(--pf-v5-c-code-block__content--PaddingBottom) var(--pf-v5-c-code-block__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-code-block__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-block__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-code-block__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-block__content--PaddingRight);
 }
 
 .pf-v5-c-code-block__pre {

package/css/components/CodeEditor/code-editor.css

@@ -45,12 +45,12 @@
 }
 .pf-v5-c-code-editor__header::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
 }
 
 .pf-v5-c-code-editor__controls {
@@ -66,13 +66,13 @@
   --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
 }
 .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
-  border-bottom-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
+  border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
 }
 
 .pf-v5-c-code-editor__header-main {
   flex-grow: 1;
-  padding-right: var(--pf-v5-c-code-editor__header-main--PaddingRight);
-  padding-left: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
 }
 
 .pf-v5-c-code-editor__main {
@@ -84,20 +84,20 @@
 }
 .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
   opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
 }
 .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
 }
@@ -106,12 +106,15 @@
 }
 
 .pf-v5-c-code-editor__header + .pf-v5-c-code-editor__main {
-  border-top-width: 0;
+  border-block-start-width: 0;
 }
 
 .pf-v5-c-code-editor__code {
   position: relative;
-  padding: var(--pf-v5-c-code-editor__code--PaddingTop) var(--pf-v5-c-code-editor__code--PaddingRight) var(--pf-v5-c-code-editor__code--PaddingBottom) var(--pf-v5-c-code-editor__code--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-code-editor__code--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-editor__code--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-code-editor__code--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-editor__code--PaddingRight);
 }
 .pf-v5-c-code-editor__code .pf-v5-c-code-editor__code-pre {
   font-family: var(--pf-v5-c-code-editor__code-pre--FontFamily);
@@ -123,17 +126,23 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--pf-v5-c-code-editor__tab--PaddingTop) var(--pf-v5-c-code-editor__tab--PaddingRight) var(--pf-v5-c-code-editor__tab--PaddingBottom) var(--pf-v5-c-code-editor__tab--PaddingLeft);
-  margin-left: auto;
+  padding-block-start: var(--pf-v5-c-code-editor__tab--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
+  margin-inline-start: auto;
   color: var(--pf-v5-c-code-editor__tab--Color);
   background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
   border-style: solid;
-  border-width: var(--pf-v5-c-code-editor__tab--BorderTopWidth) var(--pf-v5-c-code-editor__tab--BorderRightWidth) var(--pf-v5-c-code-editor__tab--BorderBottomWidth) var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-code-editor__tab--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
 }
 
 .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
-  margin-left: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
@@ -141,5 +150,5 @@
   --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
-  border-left: 1px solid var(--pf-v5-global--palette--black-700);
+  border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
 }

package/css/components/Content/content.css

@@ -85,7 +85,7 @@
   color: var(--pf-v5-c-content--a--visited--Color);
 }
 .pf-v5-c-content li + li {
-  margin-top: var(--pf-v5-c-content--li--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--li--MarginTop);
 }
 .pf-v5-c-content p:not(:last-child),
 .pf-v5-c-content dl:not(:last-child),
@@ -96,7 +96,7 @@
 .pf-v5-c-content pre:not(:last-child),
 .pf-v5-c-content table:not(:last-child),
 .pf-v5-c-content hr:not(:last-child) {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom);
+  margin-block-end: var(--pf-v5-c-content--MarginBottom);
 }
 .pf-v5-c-content h1,
 .pf-v5-c-content h2,
@@ -113,7 +113,7 @@
 .pf-v5-c-content h4:first-child,
 .pf-v5-c-content h5:first-child,
 .pf-v5-c-content h6:first-child {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .pf-v5-c-content h1:last-child,
 .pf-v5-c-content h2:last-child,
@@ -121,7 +121,7 @@
 .pf-v5-c-content h4:last-child,
 .pf-v5-c-content h5:last-child,
 .pf-v5-c-content h6:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .pf-v5-c-content ol,
 .pf-v5-c-content ul {
@@ -129,48 +129,48 @@
 }
 .pf-v5-c-content ol.pf-m-plain,
 .pf-v5-c-content ul.pf-m-plain {
-  padding-left: 0;
-  margin-left: 0;
+  padding-inline-start: 0;
+  margin-inline-start: 0;
   list-style: none;
 }
 .pf-v5-c-content h1 {
-  margin-top: var(--pf-v5-c-content--h1--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h1--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h1--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h1--MarginBottom);
   font-size: var(--pf-v5-c-content--h1--FontSize);
   font-weight: var(--pf-v5-c-content--h1--FontWeight);
   line-height: var(--pf-v5-c-content--h1--LineHeight);
 }
 .pf-v5-c-content h2 {
-  margin-top: var(--pf-v5-c-content--h2--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h2--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h2--MarginBottom);
   font-size: var(--pf-v5-c-content--h2--FontSize);
   font-weight: var(--pf-v5-c-content--h2--FontWeight);
   line-height: var(--pf-v5-c-content--h2--LineHeight);
 }
 .pf-v5-c-content h3 {
-  margin-top: var(--pf-v5-c-content--h3--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h3--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h3--MarginBottom);
   font-size: var(--pf-v5-c-content--h3--FontSize);
   font-weight: var(--pf-v5-c-content--h3--FontWeight);
   line-height: var(--pf-v5-c-content--h3--LineHeight);
 }
 .pf-v5-c-content h4 {
-  margin-top: var(--pf-v5-c-content--h4--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h4--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h4--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h4--MarginBottom);
   font-size: var(--pf-v5-c-content--h4--FontSize);
   font-weight: var(--pf-v5-c-content--h4--FontWeight);
   line-height: var(--pf-v5-c-content--h4--LineHeight);
 }
 .pf-v5-c-content h5 {
-  margin-top: var(--pf-v5-c-content--h5--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h5--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h5--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h5--MarginBottom);
   font-size: var(--pf-v5-c-content--h5--FontSize);
   font-weight: var(--pf-v5-c-content--h5--FontWeight);
   line-height: var(--pf-v5-c-content--h5--LineHeight);
 }
 .pf-v5-c-content h6 {
-  margin-top: var(--pf-v5-c-content--h6--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h6--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h6--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h6--MarginBottom);
   font-size: var(--pf-v5-c-content--h6--FontSize);
   font-weight: var(--pf-v5-c-content--h6--FontWeight);
   line-height: var(--pf-v5-c-content--h6--LineHeight);
@@ -182,12 +182,15 @@
   color: var(--pf-v5-c-content--small--Color);
 }
 .pf-v5-c-content small:not(:last-child) {
-  margin-bottom: var(--pf-v5-c-content--small--MarginBottom);
+  margin-block-end: var(--pf-v5-c-content--small--MarginBottom);
 }
 .pf-v5-c-content blockquote {
-  padding: var(--pf-v5-c-content--blockquote--PaddingTop) var(--pf-v5-c-content--blockquote--PaddingRight) var(--pf-v5-c-content--blockquote--PaddingBottom) var(--pf-v5-c-content--blockquote--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-content--blockquote--PaddingTop);
+  padding-block-end: var(--pf-v5-c-content--blockquote--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-content--blockquote--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-content--blockquote--PaddingRight);
   color: var(--pf-v5-c-content--blockquote--Color);
-  border-left: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor);
 }
 .pf-v5-c-content hr {
   height: var(--pf-v5-c-content--hr--Height);
@@ -195,29 +198,29 @@
   border: none;
 }
 .pf-v5-c-content ol {
-  padding-left: var(--pf-v5-c-content--ol--PaddingLeft);
-  margin-left: var(--pf-v5-c-content--ol--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-content--ol--PaddingLeft);
+  margin-inline-start: var(--pf-v5-c-content--ol--MarginLeft);
 }
 .pf-v5-c-content ol ul {
   --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ul--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ul--nested--MarginTop);
 }
 .pf-v5-c-content ol ol {
   --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ol--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ol--nested--MarginTop);
 }
 .pf-v5-c-content ul {
-  padding-left: var(--pf-v5-c-content--ul--PaddingLeft);
-  margin-left: var(--pf-v5-c-content--ul--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-content--ul--PaddingLeft);
+  margin-inline-start: var(--pf-v5-c-content--ul--MarginLeft);
   list-style: var(--pf-v5-c-content--ul--ListStyle);
 }
 .pf-v5-c-content ul ul {
   --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ul--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ul--nested--MarginTop);
 }
 .pf-v5-c-content ul ol {
   --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ol--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ol--nested--MarginTop);
 }
 .pf-v5-c-content dl {
   display: grid;
@@ -234,7 +237,7 @@
   font-weight: var(--pf-v5-c-content--dt--FontWeight);
 }
 .pf-v5-c-content dt:not(:first-child) {
-  margin-top: var(--pf-v5-c-content--dt--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--dt--MarginTop);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-content dt:not(:first-child) {

package/css/components/ContextSelector/context-selector.css

@@ -143,10 +143,10 @@
   align-self: stretch;
 }
 .pf-v5-c-context-selector.pf-m-full-height .pf-v5-c-context-selector__toggle::before {
-  border-top-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
+  border-block-start-width: var(--pf-v5-c-context-selector--m-full-height__toggle--before--BorderTopWidth);
 }
 .pf-v5-c-context-selector.pf-m-full-height:hover .pf-v5-c-context-selector__toggle::before {
-  border-bottom-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
 }
 .pf-v5-c-context-selector.pf-m-large {
   --pf-v5-c-context-selector__toggle--PaddingTop: var(--pf-v5-c-context-selector--m-large__toggle--PaddingTop);
@@ -176,7 +176,10 @@
   column-gap: var(--pf-v5-c-context-selector__toggle--ColumnGap);
   align-items: center;
   width: 100%;
-  padding: var(--pf-v5-c-context-selector__toggle--PaddingTop) var(--pf-v5-c-context-selector__toggle--PaddingRight) var(--pf-v5-c-context-selector__toggle--PaddingBottom) var(--pf-v5-c-context-selector__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-context-selector__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-context-selector__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-context-selector__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-context-selector__toggle--PaddingRight);
   color: var(--pf-v5-c-context-selector__toggle--Color);
   white-space: nowrap;
   cursor: pointer;
@@ -185,25 +188,28 @@
 }
 .pf-v5-c-context-selector__toggle::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-context-selector__toggle--BorderWidth) solid;
-  border-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor) var(--pf-v5-c-context-selector__toggle--BorderRightColor) var(--pf-v5-c-context-selector__toggle--BorderBottomColor) var(--pf-v5-c-context-selector__toggle--BorderLeftColor);
+  border-block-start-color: var(--pf-v5-c-context-selector__toggle--BorderTopColor);
+  border-block-end-color: var(--pf-v5-c-context-selector__toggle--BorderBottomColor);
+  border-inline-start-color: var(--pf-v5-c-context-selector__toggle--BorderLeftColor);
+  border-inline-end-color: var(--pf-v5-c-context-selector__toggle--BorderRightColor);
 }
 .pf-v5-c-context-selector__toggle:hover::before {
   --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-context-selector__toggle--hover--BorderBottomWidth);
 }
 .pf-v5-c-context-selector__toggle:active::before, .pf-v5-c-context-selector__toggle.pf-m-active::before, .pf-v5-c-context-selector__toggle:focus-within::before {
   --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--active--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-context-selector__toggle--active--BorderBottomWidth);
 }
 .pf-m-expanded > .pf-v5-c-context-selector__toggle::before {
   --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-context-selector__toggle--expanded--BorderBottomWidth);
 }
 .pf-v5-c-context-selector__toggle.pf-m-plain {
   --pf-v5-c-context-selector__toggle--PaddingRight: var(--pf-v5-c-context-selector__toggle--m-plain--PaddingRight);
@@ -237,19 +243,19 @@
   font-size: var(--pf-v5-c-context-selector__toggle-text--FontSize);
   font-weight: var(--pf-v5-c-context-selector__toggle-text--FontWeight);
   line-height: var(--pf-v5-c-context-selector__toggle-text--LineHeight);
-  text-align: left;
+  text-align: start;
 }
 
 .pf-v5-c-context-selector__toggle-icon {
-  padding-right: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight);
-  padding-left: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-context-selector__toggle-icon--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-context-selector__toggle-icon--PaddingRight);
   color: var(--pf-v5-c-context-selector__toggle-icon--Color, inherit);
 }
 
 .pf-v5-c-context-selector__menu {
   color: var(--pf-v5-global--Color--100);
   position: absolute;
-  top: var(--pf-v5-c-context-selector__menu--Top);
+  inset-block-start: var(--pf-v5-c-context-selector__menu--Top);
   z-index: var(--pf-v5-c-context-selector__menu--ZIndex);
   min-width: 100%;
   background-color: var(--pf-v5-c-context-selector__menu--BackgroundColor);
@@ -258,29 +264,35 @@
 }
 .pf-v5-c-context-selector__menu.pf-m-static {
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }
 
 .pf-v5-c-context-selector__menu-search {
   position: relative;
-  padding: var(--pf-v5-c-context-selector__menu-search--PaddingTop) var(--pf-v5-c-context-selector__menu-search--PaddingRight) var(--pf-v5-c-context-selector__menu-search--PaddingBottom) var(--pf-v5-c-context-selector__menu-search--PaddingLeft);
-  border-bottom: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
+  padding-block-start: var(--pf-v5-c-context-selector__menu-search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-context-selector__menu-search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-context-selector__menu-search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-context-selector__menu-search--PaddingRight);
+  border-block-end: var(--pf-v5-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-v5-c-context-selector__menu-search--BorderBottomColor);
 }
 
 .pf-v5-c-context-selector__menu-footer {
-  padding: var(--pf-v5-c-context-selector__menu-footer--PaddingTop) var(--pf-v5-c-context-selector__menu-footer--PaddingRight) var(--pf-v5-c-context-selector__menu-footer--PaddingBottom) var(--pf-v5-c-context-selector__menu-footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-context-selector__menu-footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-context-selector__menu-footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-context-selector__menu-footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-context-selector__menu-footer--PaddingRight);
   box-shadow: var(--pf-v5-c-context-selector__menu-footer--BoxShadow);
 }
 
 .pf-v5-c-context-selector__menu-list {
   max-height: var(--pf-v5-c-context-selector__menu-list--MaxHeight);
-  padding-top: var(--pf-v5-c-context-selector__menu-list--PaddingTop);
-  padding-bottom: var(--pf-v5-c-context-selector__menu-list--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-context-selector__menu-list--PaddingTop);
+  padding-block-end: var(--pf-v5-c-context-selector__menu-list--PaddingBottom);
   overflow-y: auto;
 }
 
@@ -288,7 +300,10 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop) var(--pf-v5-c-context-selector__menu-list-item--PaddingRight) var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom) var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-context-selector__menu-list-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-context-selector__menu-list-item--PaddingRight);
   color: var(--pf-v5-c-context-selector__menu-list-item--Color);
   white-space: nowrap;
   background-color: var(--pf-v5-c-context-selector__menu-list-item--BackgroundColor);
@@ -317,5 +332,5 @@
   background: var(--pf-v5-global--BackgroundColor--300);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-context-selector__menu-footer {
-  border-top: 1px solid var(--pf-v5-global--BorderColor--300);
+  border-block-start: 1px solid var(--pf-v5-global--BorderColor--300);
 }

package/css/components/DataList/data-list-grid.css

@@ -23,19 +23,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 768px) {
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -52,8 +50,6 @@
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 768px) {
   .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;
@@ -85,19 +81,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 0) {
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -114,8 +108,6 @@
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 0) {
   .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;
@@ -147,19 +139,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 576px) {
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -176,8 +166,6 @@
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 576px) {
   .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;
@@ -209,19 +197,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 768px) {
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -238,8 +224,6 @@
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 768px) {
   .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;
@@ -271,19 +255,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 992px) {
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -300,8 +282,6 @@
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 992px) {
   .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;
@@ -333,19 +313,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 1200px) {
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -362,8 +340,6 @@
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 1200px) {
   .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;
@@ -395,19 +371,17 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
+    padding-block-end: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
   }
-}
-@media screen and (min-width: 1450px) {
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
-    margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
+    margin-inline-end: var(--pf-v5-c-data-list__cell--MarginRight);
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell + .pf-v5-c-data-list__cell {
     flex: 1;
     order: initial;
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-align-right {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-no-fill {
     flex: none;
@@ -424,8 +398,6 @@
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
     flex-grow: 5;
   }
-}
-@media screen and (min-width: 1450px) {
   .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__expandable-content {
     max-height: initial;
     overflow-y: visible;