@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.9

package/components/Button/button.css

@@ -8,7 +8,6 @@
   --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--md);
   --pf-v5-c-button--BackgroundColor: transparent;
   --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v5-c-button--after--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-button--after--BorderColor: transparent;
   --pf-v5-c-button--after--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v5-c-button--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -106,8 +105,13 @@
   --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
   --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v5-c-button--m-plain--hover--BackgroundColor: --pf-t--global--background--color--action--plain--hover;
+  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
   --pf-v5-c-button--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
@@ -115,10 +119,9 @@
   --pf-v5-c-button--m-plain--active--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
-  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
   --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v5-c-button--m-control--BorderRadius: 0;
+  --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
@@ -172,7 +175,10 @@
   --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300);
   position: relative;
   display: inline-block;
-  padding: var(--pf-v5-c-button--PaddingTop) var(--pf-v5-c-button--PaddingRight) var(--pf-v5-c-button--PaddingBottom) var(--pf-v5-c-button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-button--PaddingRight);
   font-size: var(--pf-v5-c-button--FontSize);
   font-weight: var(--pf-v5-c-button--FontWeight);
   line-height: var(--pf-v5-c-button--LineHeight);
@@ -184,15 +190,15 @@
 }
 .pf-v5-c-button::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;
   pointer-events: none;
   content: "";
   border: var(--pf-v5-c-button--after--BorderWidth) solid;
   border-color: var(--pf-v5-c-button--after--BorderColor);
-  border-radius: var(--pf-v5-c-button--after--BorderRadius);
+  border-radius: var(--pf-v5-c-button--BorderRadius);
 }
 .pf-v5-c-button:hover {
   --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
@@ -298,8 +304,11 @@
   --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
   --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
   display: inline;
-  padding: var(--pf-v5-c-button--m-link--m-inline--PaddingTop) var(--pf-v5-c-button--m-link--m-inline--PaddingRight) var(--pf-v5-c-button--m-link--m-inline--PaddingBottom) var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
-  text-align: left;
+  padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
+  padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
+  text-align: start;
   white-space: normal;
   cursor: pointer;
 }
@@ -394,7 +403,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control:hover::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-control:active, .pf-v5-c-button.pf-m-control.pf-m-active {
   --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--active--Color);
@@ -402,7 +411,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--active--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control:active::after, .pf-v5-c-button.pf-m-control.pf-m-active::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-control:focus {
   --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--focus--Color);
@@ -410,7 +419,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--focus--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control:focus::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-control.pf-m-expanded {
   --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--m-expanded--Color);
@@ -418,7 +427,7 @@
   --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor);
 }
 .pf-v5-c-button.pf-m-control.pf-m-expanded::after {
-  border-bottom-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
 }
 .pf-v5-c-button.pf-m-plain {
   --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
@@ -431,6 +440,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.pf-m-plain:focus, .pf-v5-c-button.pf-m-plain:active {
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
   mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
@@ -485,16 +497,16 @@
 }
 
 .pf-v5-c-button__icon.pf-m-start {
-  margin-right: var(--pf-v5-c-button__icon--m-start--MarginRight);
+  margin-inline-end: var(--pf-v5-c-button__icon--m-start--MarginRight);
 }
 .pf-v5-c-button__icon.pf-m-end {
-  margin-left: var(--pf-v5-c-button__icon--m-end--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-button__icon--m-end--MarginLeft);
 }
 
 .pf-v5-c-button__progress {
   position: absolute;
-  top: var(--pf-v5-c-button__progress--Top);
-  left: var(--pf-v5-c-button__progress--Left);
+  inset-block-start: var(--pf-v5-c-button__progress--Top);
+  inset-inline-start: var(--pf-v5-c-button__progress--Left);
   line-height: 1;
   transform: translate(var(--pf-v5-c-button__progress--TranslateX), var(--pf-v5-c-button__progress--TranslateY));
 }
@@ -505,5 +517,5 @@
 .pf-v5-c-button__count {
   display: inline-flex;
   align-items: center;
-  margin-left: var(--pf-v5-c-button__count--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-button__count--MarginLeft);
 }

package/components/Button/button.scss

@@ -11,7 +11,6 @@
   --#{$button}--FontSize: var(--pf-t--global--font--size--body--md);
   --#{$button}--BackgroundColor: transparent;
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$button}--after--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--after--BorderColor: transparent;
   --#{$button}--after--BorderWidth: var(--pf-t--global--border--width--button--default);
 
@@ -137,8 +136,13 @@
 
   // Plain btn
   --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
-  --#{$button}--m-plain--hover--BackgroundColor: --pf-t--global--background--color--action--plain--hover;
+  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$button}--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-plain--focus--BackgroundColor: transparent;
   --#{$button}--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
@@ -147,13 +151,10 @@
   --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --#{$button}--m-plain--disabled--BackgroundColor: transparent;
 
-  // TODO this token needs to be added to figma
-  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
-
   // Control Button
   --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$button}--m-control--Color: var(--pf-t--global--text--color--subtle);
-  --#{$button}--m-control--BorderRadius: 0;
+  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$button}--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$button}--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$button}--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
@@ -216,7 +217,10 @@
 
   position: relative;
   display: inline-block;
-  padding: var(--#{$button}--PaddingTop) var(--#{$button}--PaddingRight) var(--#{$button}--PaddingBottom) var(--#{$button}--PaddingLeft);
+  padding-block-start: var(--#{$button}--PaddingTop);
+  padding-block-end: var(--#{$button}--PaddingBottom);
+  padding-inline-start: var(--#{$button}--PaddingLeft);
+  padding-inline-end: var(--#{$button}--PaddingRight);
   font-size: var(--#{$button}--FontSize);
   font-weight: var(--#{$button}--FontWeight);
   line-height: var(--#{$button}--LineHeight);
@@ -228,15 +232,15 @@
 
   &::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;
     pointer-events: none;
     content: "";
     border: var(--#{$button}--after--BorderWidth) solid;
     border-color: var(--#{$button}--after--BorderColor);
-    border-radius: var(--#{$button}--after--BorderRadius);
+    border-radius: var(--#{$button}--BorderRadius);
   }
 
   &:hover {
@@ -393,8 +397,11 @@
       --#{$button}__progress--Left: var(--#{$button}--m-link--m-inline__progress--Left);
 
       display: inline;
-      padding: var(--#{$button}--m-link--m-inline--PaddingTop) var(--#{$button}--m-link--m-inline--PaddingRight) var(--#{$button}--m-link--m-inline--PaddingBottom) var(--#{$button}--m-link--m-inline--PaddingLeft);
-      text-align: left;
+      padding-block-start: var(--#{$button}--m-link--m-inline--PaddingTop);
+      padding-block-end: var(--#{$button}--m-link--m-inline--PaddingBottom);
+      padding-inline-start: var(--#{$button}--m-link--m-inline--PaddingLeft);
+      padding-inline-end: var(--#{$button}--m-link--m-inline--PaddingRight);
+      text-align: start;
       white-space: normal;
       cursor: pointer;
 
@@ -519,7 +526,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--hover--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--hover--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--hover--after--BorderBottomWidth);
       }
     }
 
@@ -530,7 +537,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--active--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--active--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--active--after--BorderBottomWidth);
       }
     }
 
@@ -540,7 +547,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--focus--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--focus--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--focus--after--BorderBottomWidth);
       }
     }
 
@@ -550,7 +557,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--m-expanded--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--m-expanded--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--m-expanded--after--BorderBottomWidth);
       }
     }
   }
@@ -568,6 +575,11 @@
     color: var(--#{$button}--m-plain--Color);
     background-color: var(--#{$button}--m-plain--BackgroundColor);
 
+
+    &.pf-m-no-padding {
+      padding: 0;
+    }
+
     &:hover,
     &:focus,
     &:active {
@@ -648,18 +660,18 @@
 
 .#{$button}__icon {
   &.pf-m-start {
-    margin-right: var(--#{$button}__icon--m-start--MarginRight);
+    margin-inline-end: var(--#{$button}__icon--m-start--MarginRight);
   }
 
   &.pf-m-end {
-    margin-left: var(--#{$button}__icon--m-end--MarginLeft);
+    margin-inline-start: var(--#{$button}__icon--m-end--MarginLeft);
   }
 }
 
 .#{$button}__progress {
   position: absolute;
-  top: var(--#{$button}__progress--Top);
-  left: var(--#{$button}__progress--Left);
+  inset-block-start: var(--#{$button}__progress--Top);
+  inset-inline-start: var(--#{$button}__progress--Left);
   line-height: 1;
   transform: translate(var(--#{$button}__progress--TranslateX), var(--#{$button}__progress--TranslateY));
 
@@ -671,7 +683,7 @@
 .#{$button}__count {
   display: inline-flex;
   align-items: center;
-  margin-left: var(--#{$button}__count--MarginLeft);
+  margin-inline-start: var(--#{$button}__count--MarginLeft);
 }
 
 // // stylelint-disable no-invalid-position-at-import-rule

package/components/Button/themes/dark/button.scss

@@ -44,7 +44,7 @@
     &.pf-m-control:disabled {
       &::after {
         border: 0;
-        border-bottom: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--palette--black-700);
+        border-block-end: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--palette--black-700);
       }
     }
   }

package/components/CalendarMonth/calendar-month.css

@@ -67,20 +67,27 @@
   color: var(--pf-v5-global--Color--100);
   display: inline-flex;
   flex-direction: column;
-  padding: var(--pf-v5-c-calendar-month--PaddingTop) var(--pf-v5-c-calendar-month--PaddingRight) var(--pf-v5-c-calendar-month--PaddingBottom) var(--pf-v5-c-calendar-month--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-calendar-month--PaddingTop);
+  padding-block-end: var(--pf-v5-c-calendar-month--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-calendar-month--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-calendar-month--PaddingRight);
   font-size: var(--pf-v5-c-calendar-month--FontSize);
   background-color: var(--pf-v5-c-calendar-month--BackgroundColor);
 }
 
 .pf-v5-c-calendar-month__header {
   display: flex;
-  margin-bottom: var(--pf-v5-c-calendar-month__header--MarginBottom);
+  margin-block-end: var(--pf-v5-c-calendar-month__header--MarginBottom);
 }
 
 .pf-v5-c-calendar-month__header-nav-control {
-  margin-right: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
-  margin-left: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
+  scale: -1 1;
+}
+
 .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
   --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
   --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -103,11 +110,11 @@
 }
 
 .pf-v5-c-calendar-month__days {
-  border-bottom: var(--pf-v5-c-calendar-month__days--BorderBottomWidth) solid var(--pf-v5-c-calendar-month__days--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-calendar-month__days--BorderBottomWidth) solid var(--pf-v5-c-calendar-month__days--BorderBottomColor);
 }
 
 .pf-v5-c-calendar-month__day {
-  padding-bottom: var(--pf-v5-c-calendar-month__day--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-calendar-month__day--PaddingBottom);
   font-weight: var(--pf-v5-c-calendar-month__day--FontWeight);
   text-align: center;
 }
@@ -119,15 +126,18 @@
 .pf-v5-c-calendar-month__dates-cell {
   --pf-v5-c-calendar-month__dates-cell--before--Top: var(--pf-v5-c-calendar-month__dates-cell--PaddingTop);
   position: relative;
-  padding: var(--pf-v5-c-calendar-month__dates-cell--PaddingTop) var(--pf-v5-c-calendar-month__dates-cell--PaddingRight) var(--pf-v5-c-calendar-month__dates-cell--PaddingBottom) var(--pf-v5-c-calendar-month__dates-cell--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-calendar-month__dates-cell--PaddingTop);
+  padding-block-end: var(--pf-v5-c-calendar-month__dates-cell--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-calendar-month__dates-cell--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-calendar-month__dates-cell--PaddingRight);
   text-align: center;
 }
 .pf-v5-c-calendar-month__dates-cell::before {
   position: absolute;
-  top: var(--pf-v5-c-calendar-month__dates-cell--before--Top);
-  right: var(--pf-v5-c-calendar-month__dates-cell--before--Right);
-  bottom: var(--pf-v5-c-calendar-month__dates-cell--before--Bottom);
-  left: var(--pf-v5-c-calendar-month__dates-cell--before--Left);
+  inset-block-start: var(--pf-v5-c-calendar-month__dates-cell--before--Top);
+  inset-block-end: var(--pf-v5-c-calendar-month__dates-cell--before--Bottom);
+  inset-inline-start: var(--pf-v5-c-calendar-month__dates-cell--before--Left);
+  inset-inline-end: var(--pf-v5-c-calendar-month__dates-cell--before--Right);
   content: "";
   background-color: var(--pf-v5-c-calendar-month__dates-cell--before--BackgroundColor);
 }
@@ -175,10 +185,10 @@
 }
 .pf-v5-c-calendar-month__date::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: "";
   border: var(--pf-v5-c-calendar-month__date--after--BorderWidth) solid var(--pf-v5-c-calendar-month__date--after--BorderColor);
 }

package/components/CalendarMonth/calendar-month.scss

@@ -67,19 +67,24 @@
 
   display: inline-flex;
   flex-direction: column;
-  padding: var(--#{$calendar-month}--PaddingTop) var(--#{$calendar-month}--PaddingRight) var(--#{$calendar-month}--PaddingBottom) var(--#{$calendar-month}--PaddingLeft);
+  padding-block-start: var(--#{$calendar-month}--PaddingTop);
+  padding-block-end: var(--#{$calendar-month}--PaddingBottom);
+  padding-inline-start: var(--#{$calendar-month}--PaddingLeft);
+  padding-inline-end: var(--#{$calendar-month}--PaddingRight);
   font-size: var(--#{$calendar-month}--FontSize);
   background-color: var(--#{$calendar-month}--BackgroundColor);
 }
 
 .#{$calendar-month}__header {
   display: flex;
-  margin-bottom: var(--#{$calendar-month}__header--MarginBottom);
+  margin-block-end: var(--#{$calendar-month}__header--MarginBottom);
 }
 
 .#{$calendar-month}__header-nav-control {
-  margin-right: var(--#{$calendar-month}__header-nav-control--MarginRight);
-  margin-left: var(--#{$calendar-month}__header-nav-control--MarginLeft);
+  @include pf-v5-mirror-inline-on-rtl;
+
+  margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
+  margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);
 
   &.pf-m-prev-month {
     --#{$calendar-month}__header-nav-control--MarginRight: var(--#{$calendar-month}__header-nav-control--m-prev-month--MarginRight);
@@ -105,11 +110,11 @@
 }
 
 .#{$calendar-month}__days {
-  border-bottom: var(--#{$calendar-month}__days--BorderBottomWidth) solid var(--#{$calendar-month}__days--BorderBottomColor);
+  border-block-end: var(--#{$calendar-month}__days--BorderBottomWidth) solid var(--#{$calendar-month}__days--BorderBottomColor);
 }
 
 .#{$calendar-month}__day {
-  padding-bottom: var(--#{$calendar-month}__day--PaddingBottom);
+  padding-block-end: var(--#{$calendar-month}__day--PaddingBottom);
   font-weight: var(--#{$calendar-month}__day--FontWeight);
   text-align: center;
 }
@@ -122,15 +127,18 @@
   --#{$calendar-month}__dates-cell--before--Top: var(--#{$calendar-month}__dates-cell--PaddingTop);
 
   position: relative;
-  padding: var(--#{$calendar-month}__dates-cell--PaddingTop) var(--#{$calendar-month}__dates-cell--PaddingRight) var(--#{$calendar-month}__dates-cell--PaddingBottom) var(--#{$calendar-month}__dates-cell--PaddingLeft);
+  padding-block-start: var(--#{$calendar-month}__dates-cell--PaddingTop);
+  padding-block-end: var(--#{$calendar-month}__dates-cell--PaddingBottom);
+  padding-inline-start: var(--#{$calendar-month}__dates-cell--PaddingLeft);
+  padding-inline-end: var(--#{$calendar-month}__dates-cell--PaddingRight);
   text-align: center;
 
   &::before {
     position: absolute;
-    top: var(--#{$calendar-month}__dates-cell--before--Top);
-    right: var(--#{$calendar-month}__dates-cell--before--Right);
-    bottom: var(--#{$calendar-month}__dates-cell--before--Bottom);
-    left: var(--#{$calendar-month}__dates-cell--before--Left);
+    inset-block-start: var(--#{$calendar-month}__dates-cell--before--Top);
+    inset-block-end: var(--#{$calendar-month}__dates-cell--before--Bottom);
+    inset-inline-start: var(--#{$calendar-month}__dates-cell--before--Left);
+    inset-inline-end: var(--#{$calendar-month}__dates-cell--before--Right);
     content: "";
     background-color: var(--#{$calendar-month}__dates-cell--before--BackgroundColor);
   }
@@ -186,10 +194,10 @@
 
   &::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: "";
     border: var(--#{$calendar-month}__date--after--BorderWidth) solid var(--#{$calendar-month}__date--after--BorderColor);
   }

package/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);
@@ -145,9 +145,9 @@
 }
 .pf-v5-c-card.pf-m-hoverable-raised::before, .pf-v5-c-card.pf-m-selectable-raised::before, .pf-v5-c-card.pf-m-non-selectable-raised::before {
   position: absolute;
-  right: var(--pf-v5-c-card--m-selectable-raised--before--Right);
-  bottom: var(--pf-v5-c-card--m-selectable-raised--before--Bottom);
-  left: var(--pf-v5-c-card--m-selectable-raised--before--Left);
+  inset-block-end: var(--pf-v5-c-card--m-selectable-raised--before--Bottom);
+  inset-inline-start: var(--pf-v5-c-card--m-selectable-raised--before--Left);
+  inset-inline-end: var(--pf-v5-c-card--m-selectable-raised--before--Right);
   height: var(--pf-v5-c-card--m-selectable-raised--before--Height);
   content: "";
   background-color: var(--pf-v5-c-card--m-selectable-raised--before--BackgroundColor);
@@ -233,7 +233,7 @@
   height: var(--pf-v5-c-card--m-full-height--Height);
 }
 .pf-v5-c-card > .pf-v5-c-divider + .pf-v5-c-card__header, .pf-v5-c-card > .pf-v5-c-divider + .pf-v5-c-card__title, .pf-v5-c-card > .pf-v5-c-divider + .pf-v5-c-card__body, .pf-v5-c-card > .pf-v5-c-divider + .pf-v5-c-card__footer {
-  padding-top: var(--pf-v5-c-card--c-divider--child--PaddingTop);
+  padding-block-start: var(--pf-v5-c-card--c-divider--child--PaddingTop);
 }
 
 .pf-v5-c-card__header {
@@ -260,13 +260,19 @@
 
 .pf-v5-c-card__header-toggle {
   align-self: flex-start;
-  margin: var(--pf-v5-c-card__header-toggle--MarginTop) var(--pf-v5-c-card__header-toggle--MarginRight) var(--pf-v5-c-card__header-toggle--MarginBottom) var(--pf-v5-c-card__header-toggle--MarginLeft);
+  margin-block-start: var(--pf-v5-c-card__header-toggle--MarginTop);
+  margin-block-end: var(--pf-v5-c-card__header-toggle--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-card__header-toggle--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-card__header-toggle--MarginRight);
 }
 
 .pf-v5-c-card__header-toggle-icon {
   display: inline-block;
   transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-card__title-text {
   font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -281,8 +287,10 @@
   align-items: center;
   align-self: flex-start;
   order: 1;
-  padding-left: var(--pf-v5-c-card__actions--PaddingLeft);
-  margin: var(--pf-v5-c-card__actions--MarginTop) 0 var(--pf-v5-c-card__actions--MarginBottom) auto;
+  padding-inline-start: var(--pf-v5-c-card__actions--PaddingLeft);
+  margin-block-start: var(--pf-v5-c-card__actions--MarginTop);
+  margin-block-end: var(--pf-v5-c-card__actions--MarginBottom);
+  margin-inline-start: auto;
 }
 .pf-v5-c-card__actions + .pf-v5-c-card__title,
 .pf-v5-c-card__actions + .pf-v5-c-card__body,
@@ -346,20 +354,20 @@
 .pf-v5-c-card__title,
 .pf-v5-c-card__body,
 .pf-v5-c-card__footer {
-  padding-right: var(--pf-v5-c-card--child--PaddingRight);
-  padding-bottom: var(--pf-v5-c-card--child--PaddingBottom);
-  padding-left: var(--pf-v5-c-card--child--PaddingLeft);
+  padding-block-end: var(--pf-v5-c-card--child--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-card--child--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-card--child--PaddingRight);
 }
 .pf-v5-c-card__header:first-child,
 .pf-v5-c-card__title:first-child,
 .pf-v5-c-card__body:first-child,
 .pf-v5-c-card__footer:first-child {
-  padding-top: var(--pf-v5-c-card--first-child--PaddingTop);
+  padding-block-start: var(--pf-v5-c-card--first-child--PaddingTop);
 }
 
 .pf-v5-c-card__header:not(:last-child),
 .pf-v5-c-card__title:not(:last-child) {
-  padding-bottom: var(--pf-v5-c-card__title--not--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-card__title--not--last-child--PaddingBottom);
 }
 
 .pf-v5-c-card__expandable-content {
@@ -380,10 +388,10 @@
 
 .pf-v5-c-card__sr-input:focus + .pf-v5-c-card::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: "";
   border: var(--pf-v5-c-card__input--focus--BorderWidth) solid var(--pf-v5-c-card__input--focus--BorderColor);
 }