@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.41

package/components/Content/content.scss

@@ -2,101 +2,101 @@
 
 .#{$content} {
   // Body
-  --#{$content}--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$content}--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$content}--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$content}--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$content}--FontWeight: var(--pf-t--global--font--weight--body);
 
   // this ensures color is not overridden
-  --#{$content}--Color: var(--#{$pf-global}--Color--100);
+  --#{$content}--Color: var(--pf-t--global--text--color--regular);
 
   // Headings
-  --#{$content}--heading--FontFamily: var(--#{$pf-global}--FontFamily--heading);
+  --#{$content}--heading--FontFamily: var(--pf-t--global--font--family--heading);
 
   // h1
-  --#{$content}--h1--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h1--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h1--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$content}--h1--FontSize: var(--#{$pf-global}--FontSize--2xl);
-  --#{$content}--h1--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h1--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h1--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
+  --#{$content}--h1--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h2
-  --#{$content}--h2--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h2--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h2--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h2--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$content}--h2--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h2--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h2--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
+  --#{$content}--h2--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h3
-  --#{$content}--h3--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h3--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h3--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h3--FontSize: var(--#{$pf-global}--FontSize--lg);
-  --#{$content}--h3--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h3--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h3--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
+  --#{$content}--h3--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h4
-  --#{$content}--h4--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h4--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h4--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h4--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--h4--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h4--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h4--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
+  --#{$content}--h4--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h5
-  --#{$content}--h5--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h5--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h5--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h5--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--h5--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h5--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h5--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
+  --#{$content}--h5--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h6
-  --#{$content}--h6--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h6--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h6--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h6--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--h6--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h6--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h6--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
+  --#{$content}--h6--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // Small text
-  --#{$content}--small--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$content}--small--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--small--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$content}--small--Color: var(--#{$pf-global}--Color--200);
+  --#{$content}--small--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$content}--small--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$content}--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$content}--small--Color: var(--pf-t--global--text--color--subtle);
 
   // Links
-  --#{$content}--a--Color: var(--#{$pf-global}--link--Color);
-  --#{$content}--a--TextDecoration: var(--#{$pf-global}--link--TextDecoration);
-  --#{$content}--a--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$content}--a--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
-  --#{$content}--a--visited--Color: var(--#{$pf-global}--link--Color--visited);
+  --#{$content}--a--Color: var(--pf-t--global--text--color--link--default);
+  --#{$content}--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$content}--a--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$content}--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$content}--a--visited--Color: var(--pf-t--global--text--color--link--visited);
 
   // Blockquote
-  --#{$content}--blockquote--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--Color: var(--#{$pf-global}--Color--200);
-  --#{$content}--blockquote--BorderLeftColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$content}--blockquote--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--lg);
+  --#{$content}--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--Color: var(--pf-t--global--text--color--subtle);
+  --#{$content}--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$content}--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300); // TODO semantic value?
 
   // Lists
-  --#{$content}--ol--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ol--MarginLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ol--nested--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ol--nested--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ul--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ul--MarginLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ul--nested--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ul--nested--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ul--ListStyle: var(--#{$pf-global}--ListStyle);
-  --#{$content}--li--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--dl--ColumnGap: var(--#{$pf-global}--spacer--2xl);
-  --#{$content}--dl--RowGap: var(--#{$pf-global}--spacer--md);
-  --#{$content}--dt--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$content}--dt--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$content}--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ol--MarginLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$content}--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$content}--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ul--MarginLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$content}--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$content}--ul--ListStyle: var(--#{$pf-global}--ListStyle); // TODO
+  --#{$content}--li--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$content}--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --#{$content}--dl--RowGap: var(--pf-t--global--spacer--md);
+  --#{$content}--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$content}--dt--MarginTop: var(--pf-t--global--spacer--md);
   --#{$content}--dt--sm--MarginTop: 0;
 
   // hr
-  --#{$content}--hr--Height: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$content}--hr--BackgroundColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$content}--hr--Height: var(--pf-t--global--border--width--divider--default);
+  --#{$content}--hr--BackgroundColor: var(--pf-t--global--border--color--default);
 
   font-size: var(--#{$content}--FontSize);
   line-height: var(--#{$content}--LineHeight);
@@ -122,7 +122,7 @@
   // stylelint-enable
 
   li + li {
-    margin-top: var(--#{$content}--li--MarginTop);
+    margin-block-start: var(--#{$content}--li--MarginTop);
   }
 
   p,
@@ -136,7 +136,7 @@
   hr {
     &:not(:last-child) {
       // This variable name doesn't reflect the selector, it's an excpection to the variable system.
-      margin-bottom: var(--#{$content}--MarginBottom);
+      margin-block-end: var(--#{$content}--MarginBottom);
     }
   }
 
@@ -150,11 +150,11 @@
     font-family: var(--#{$content}--heading--FontFamily);
 
     &:first-child {
-      margin-top: 0;
+      margin-block-start: 0;
     }
 
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 
@@ -164,56 +164,56 @@
 
     // stylelint-disable selector-no-qualifying-type
     &.pf-m-plain {
-      padding-left: 0;
-      margin-left: 0;
+      padding-inline-start: 0;
+      margin-inline-start: 0;
       list-style: none;
     }
     // stylelint-enable
   }
 
   h1 {
-    margin-top: var(--#{$content}--h1--MarginTop);
-    margin-bottom: var(--#{$content}--h1--MarginBottom);
+    margin-block-start: var(--#{$content}--h1--MarginTop);
+    margin-block-end: var(--#{$content}--h1--MarginBottom);
     font-size: var(--#{$content}--h1--FontSize);
     font-weight: var(--#{$content}--h1--FontWeight);
     line-height: var(--#{$content}--h1--LineHeight);
   }
 
   h2 {
-    margin-top: var(--#{$content}--h2--MarginTop);
-    margin-bottom: var(--#{$content}--h2--MarginBottom);
+    margin-block-start: var(--#{$content}--h2--MarginTop);
+    margin-block-end: var(--#{$content}--h2--MarginBottom);
     font-size: var(--#{$content}--h2--FontSize);
     font-weight: var(--#{$content}--h2--FontWeight);
     line-height: var(--#{$content}--h2--LineHeight);
   }
 
   h3 {
-    margin-top: var(--#{$content}--h3--MarginTop);
-    margin-bottom: var(--#{$content}--h3--MarginBottom);
+    margin-block-start: var(--#{$content}--h3--MarginTop);
+    margin-block-end: var(--#{$content}--h3--MarginBottom);
     font-size: var(--#{$content}--h3--FontSize);
     font-weight: var(--#{$content}--h3--FontWeight);
     line-height: var(--#{$content}--h3--LineHeight);
   }
 
   h4 {
-    margin-top: var(--#{$content}--h4--MarginTop);
-    margin-bottom: var(--#{$content}--h4--MarginBottom);
+    margin-block-start: var(--#{$content}--h4--MarginTop);
+    margin-block-end: var(--#{$content}--h4--MarginBottom);
     font-size: var(--#{$content}--h4--FontSize);
     font-weight: var(--#{$content}--h4--FontWeight);
     line-height: var(--#{$content}--h4--LineHeight);
   }
 
   h5 {
-    margin-top: var(--#{$content}--h5--MarginTop);
-    margin-bottom: var(--#{$content}--h5--MarginBottom);
+    margin-block-start: var(--#{$content}--h5--MarginTop);
+    margin-block-end: var(--#{$content}--h5--MarginBottom);
     font-size: var(--#{$content}--h5--FontSize);
     font-weight: var(--#{$content}--h5--FontWeight);
     line-height: var(--#{$content}--h5--LineHeight);
   }
 
   h6 {
-    margin-top: var(--#{$content}--h6--MarginTop);
-    margin-bottom: var(--#{$content}--h6--MarginBottom);
+    margin-block-start: var(--#{$content}--h6--MarginTop);
+    margin-block-end: var(--#{$content}--h6--MarginBottom);
     font-size: var(--#{$content}--h6--FontSize);
     font-weight: var(--#{$content}--h6--FontWeight);
     line-height: var(--#{$content}--h6--LineHeight);
@@ -226,14 +226,17 @@
     color: var(--#{$content}--small--Color);
 
     &:not(:last-child) {
-      margin-bottom: var(--#{$content}--small--MarginBottom);
+      margin-block-end: var(--#{$content}--small--MarginBottom);
     }
   }
 
   blockquote {
-    padding: var(--#{$content}--blockquote--PaddingTop) var(--#{$content}--blockquote--PaddingRight) var(--#{$content}--blockquote--PaddingBottom) var(--#{$content}--blockquote--PaddingLeft);
+    padding-block-start: var(--#{$content}--blockquote--PaddingTop);
+    padding-block-end: var(--#{$content}--blockquote--PaddingBottom);
+    padding-inline-start: var(--#{$content}--blockquote--PaddingLeft);
+    padding-inline-end: var(--#{$content}--blockquote--PaddingRight);
     color: var(--#{$content}--blockquote--Color);
-    border-left: var(--#{$content}--blockquote--BorderLeftWidth) solid var(--#{$content}--blockquote--BorderLeftColor);
+    border-inline-start: var(--#{$content}--blockquote--BorderLeftWidth) solid var(--#{$content}--blockquote--BorderLeftColor);
   }
 
   hr {
@@ -243,37 +246,37 @@
   }
 
   ol {
-    padding-left: var(--#{$content}--ol--PaddingLeft);
-    margin-left: var(--#{$content}--ol--MarginLeft);
+    padding-inline-start: var(--#{$content}--ol--PaddingLeft);
+    margin-inline-start: var(--#{$content}--ol--MarginLeft);
 
     ul {
       --#{$content}--ul--MarginLeft: var(--#{$content}--ul--nested--MarginLeft);
 
-      margin-top: var(--#{$content}--ul--nested--MarginTop);
+      margin-block-start: var(--#{$content}--ul--nested--MarginTop);
     }
 
     ol {
       --#{$content}--ol--MarginLeft: var(--#{$content}--ol--nested--MarginLeft);
 
-      margin-top: var(--#{$content}--ol--nested--MarginTop);
+      margin-block-start: var(--#{$content}--ol--nested--MarginTop);
     }
   }
 
   ul {
-    padding-left: var(--#{$content}--ul--PaddingLeft);
-    margin-left: var(--#{$content}--ul--MarginLeft);
+    padding-inline-start: var(--#{$content}--ul--PaddingLeft);
+    margin-inline-start: var(--#{$content}--ul--MarginLeft);
     list-style: var(--#{$content}--ul--ListStyle);
 
     ul {
       --#{$content}--ul--MarginLeft: var(--#{$content}--ul--nested--MarginLeft);
 
-      margin-top: var(--#{$content}--ul--nested--MarginTop);
+      margin-block-start: var(--#{$content}--ul--nested--MarginTop);
     }
 
     ol {
       --#{$content}--ol--MarginLeft: var(--#{$content}--ol--nested--MarginLeft);
 
-      margin-top: var(--#{$content}--ol--nested--MarginTop);
+      margin-block-start: var(--#{$content}--ol--nested--MarginTop);
     }
   }
 
@@ -292,7 +295,7 @@
     font-weight: var(--#{$content}--dt--FontWeight);
 
     &:not(:first-child) {
-      margin-top: var(--#{$content}--dt--MarginTop);
+      margin-block-start: var(--#{$content}--dt--MarginTop);
 
       @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
         --#{$content}--dt--MarginTop: var(--#{$content}--dt--sm--MarginTop);

package/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);
 }