@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.21

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

package/components/Card/card.scss

@@ -58,7 +58,7 @@
   --#{$card}--m-selectable--m-clickable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
 
   // Selected selectable AND clickable card
-  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: transparent;
   --#{$card}--m-selectable--m-clickable--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
 
   // Clicked (pf-m-current) selectable AND clickable card
@@ -214,9 +214,9 @@
   &.pf-m-non-selectable-raised {
     &::before {
       position: absolute;
-      right: var(--#{$card}--m-selectable-raised--before--Right);
-      bottom: var(--#{$card}--m-selectable-raised--before--Bottom);
-      left: var(--#{$card}--m-selectable-raised--before--Left);
+      inset-block-end: var(--#{$card}--m-selectable-raised--before--Bottom);
+      inset-inline-start: var(--#{$card}--m-selectable-raised--before--Left);
+      inset-inline-end: var(--#{$card}--m-selectable-raised--before--Right);
       height: var(--#{$card}--m-selectable-raised--before--Height);
       content: "";
       background-color: var(--#{$card}--m-selectable-raised--before--BackgroundColor);
@@ -329,7 +329,7 @@
     & + .#{$card}__title,
     & + .#{$card}__body,
     & + .#{$card}__footer {
-      padding-top: var(--#{$card}--c-divider--child--PaddingTop);
+      padding-block-start: var(--#{$card}--c-divider--child--PaddingTop);
     }
   }
 }
@@ -362,10 +362,15 @@
 
 .#{$card}__header-toggle {
   align-self: flex-start;
-  margin: var(--#{$card}__header-toggle--MarginTop) var(--#{$card}__header-toggle--MarginRight) var(--#{$card}__header-toggle--MarginBottom) var(--#{$card}__header-toggle--MarginLeft);
+  margin-block-start: var(--#{$card}__header-toggle--MarginTop);
+  margin-block-end: var(--#{$card}__header-toggle--MarginBottom);
+  margin-inline-start: var(--#{$card}__header-toggle--MarginLeft);
+  margin-inline-end: var(--#{$card}__header-toggle--MarginRight);
 }
 
 .#{$card}__header-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   transition: var(--#{$card}__header-toggle-icon--Transition);
 }
@@ -383,8 +388,10 @@
   align-items: center;
   align-self: flex-start;
   order: 1;
-  padding-left: var(--#{$card}__actions--PaddingLeft);
-  margin: var(--#{$card}__actions--MarginTop) 0 var(--#{$card}__actions--MarginBottom) auto;
+  padding-inline-start: var(--#{$card}__actions--PaddingLeft);
+  margin-block-start: var(--#{$card}__actions--MarginTop);
+  margin-block-end: var(--#{$card}__actions--MarginBottom);
+  margin-inline-start: auto;
 
   + .#{$card}__title,
   + .#{$card}__body,
@@ -455,19 +462,19 @@
 .#{$card}__title,
 .#{$card}__body,
 .#{$card}__footer {
-  padding-right: var(--#{$card}--child--PaddingRight);
-  padding-bottom: var(--#{$card}--child--PaddingBottom);
-  padding-left: var(--#{$card}--child--PaddingLeft);
+  padding-block-end: var(--#{$card}--child--PaddingBottom);
+  padding-inline-start: var(--#{$card}--child--PaddingLeft);
+  padding-inline-end: var(--#{$card}--child--PaddingRight);
 
   &:first-child {
-    padding-top: var(--#{$card}--first-child--PaddingTop);
+    padding-block-start: var(--#{$card}--first-child--PaddingTop);
   }
 }
 
 .#{$card}__header,
 .#{$card}__title {
   &:not(:last-child) {
-    padding-bottom: var(--#{$card}__title--not--last-child--PaddingBottom);
+    padding-block-end: var(--#{$card}__title--not--last-child--PaddingBottom);
   }
 }
 
@@ -490,10 +497,10 @@
 // for the selectable raised
 .#{$card}__sr-input:focus + .#{$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(--#{$card}__input--focus--BorderWidth) solid var(--#{$card}__input--focus--BorderColor);
 }

package/components/Check/check.css

@@ -5,7 +5,8 @@
   --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-check__input--TranslateY--moz: 5px;
+  --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
+  --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
   --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
@@ -15,15 +16,21 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-check--GridGap);
+  align-items: baseline;
 }
 .pf-v5-c-check.pf-m-standalone {
   --pf-v5-c-check--GridGap: 0;
-  --pf-v5-c-check__input--TranslateY--moz: 0;
+  --pf-v5-c-check__input--TranslateY: none;
   display: inline-grid;
 }
 
+.pf-v5-c-check__input {
+  align-self: start;
+  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
+  transform: translateY(var(--pf-v5-c-check__input--TranslateY));
+}
+
 .pf-v5-c-check__label {
-  align-self: baseline;
   font-size: var(--pf-v5-c-check__label--FontSize);
   font-weight: var(--pf-v5-c-check__label--FontWeight);
   line-height: var(--pf-v5-c-check__label--LineHeight);
@@ -38,12 +45,7 @@
 
 .pf-v5-c-check__body {
   grid-column: 2;
-  margin-top: var(--pf-v5-c-check__body--MarginTop);
-}
-
-.pf-v5-c-check__input {
-  align-self: baseline;
-  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
+  margin-block-start: var(--pf-v5-c-check__body--MarginTop);
 }
 
 .pf-v5-c-check__label,
@@ -63,7 +65,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 }
 
 .pf-v5-c-check__label-required {
-  margin-left: var(--pf-v5-c-check__label-required--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-check__label-required--MarginLeft);
   font-size: var(--pf-v5-c-check__label-required--FontSize);
   color: var(--pf-v5-c-check__label-required--Color);
 }

package/components/Check/check.scss

@@ -7,7 +7,8 @@
   --#{$check}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$check}__label--FontSize: var(--#{$pf-global}--FontSize--md);
   --#{$check}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$check}__input--TranslateY--moz: 5px;
+  --#{$check}__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
+  --#{$check}__input--TranslateY--moz: var(--#{$check}__input--TranslateY); // remove at breaking change
   --#{$check}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$check}__description--Color: var(--#{$pf-global}--Color--200);
   --#{$check}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
@@ -20,17 +21,28 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--#{$check}--GridGap);
+  align-items: baseline;
 
   &.pf-m-standalone {
     --#{$check}--GridGap: 0;
-    --#{$check}__input--TranslateY--moz: 0;
+    --#{$check}__input--TranslateY: none;
 
     display: inline-grid;
   }
 }
 
+.#{$check}__input {
+  align-self: start;
+
+  // stylelint-disable property-no-vendor-prefix
+  -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz)); // remove at breaking change - no longer needed
+  // stylelint-enable
+
+  // find height of single label, divide by two, offset by 50% of own height
+  transform: translateY(var(--#{$check}__input--TranslateY));
+}
+
 .#{$check}__label {
-  align-self: baseline;
   font-size: var(--#{$check}__label--FontSize);
   font-weight: var(--#{$check}__label--FontWeight);
   line-height: var(--#{$check}__label--LineHeight);
@@ -45,15 +57,8 @@
 
 .#{$check}__body {
   grid-column: 2;
-  margin-top: var(--#{$check}__body--MarginTop);
-}
-
-// stylelint-disable property-no-vendor-prefix
-.#{$check}__input {
-  align-self: baseline;
-  -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz));
+  margin-block-start: var(--#{$check}__body--MarginTop);
 }
-// stylelint-enable
 
 .#{$check}__label,
 .#{$check}__input {
@@ -73,7 +78,7 @@
 }
 
 .#{$check}__label-required {
-  margin-left: var(--#{$check}__label-required--MarginLeft);
+  margin-inline-start: var(--#{$check}__label-required--MarginLeft);
   font-size: var(--#{$check}__label-required--FontSize);
   color: var(--#{$check}__label-required--Color);
 }

package/components/Chip/chip-group.css

@@ -35,10 +35,10 @@
   row-gap: var(--pf-v5-c-chip-group--RowGap);
   column-gap: var(--pf-v5-c-chip-group--ColumnGap);
   max-width: 100%;
-  padding-top: var(--pf-v5-c-chip-group--PaddingTop);
-  padding-right: var(--pf-v5-c-chip-group--PaddingRight);
-  padding-bottom: var(--pf-v5-c-chip-group--PaddingBottom);
-  padding-left: var(--pf-v5-c-chip-group--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-chip-group--PaddingTop);
+  padding-block-end: var(--pf-v5-c-chip-group--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-chip-group--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-chip-group--PaddingRight);
 }
 .pf-v5-c-chip-group.pf-m-category {
   --pf-v5-c-chip-group--PaddingTop: var(--pf-v5-c-chip-group--m-category--PaddingTop);
@@ -88,6 +88,6 @@
 .pf-v5-c-chip-group__close {
   display: flex;
   align-self: flex-start;
-  margin-top: var(--pf-v5-c-chip-group__close--MarginTop);
-  margin-bottom: var(--pf-v5-c-chip-group__close--MarginBottom);
+  margin-block-start: var(--pf-v5-c-chip-group__close--MarginTop);
+  margin-block-end: var(--pf-v5-c-chip-group__close--MarginBottom);
 }

package/components/Chip/chip-group.scss

@@ -39,10 +39,10 @@
   row-gap: var(--#{$chip}-group--RowGap);
   column-gap: var(--#{$chip}-group--ColumnGap);
   max-width: 100%;
-  padding-top: var(--#{$chip}-group--PaddingTop);
-  padding-right: var(--#{$chip}-group--PaddingRight);
-  padding-bottom: var(--#{$chip}-group--PaddingBottom);
-  padding-left: var(--#{$chip}-group--PaddingLeft);
+  padding-block-start: var(--#{$chip}-group--PaddingTop);
+  padding-block-end: var(--#{$chip}-group--PaddingBottom);
+  padding-inline-start: var(--#{$chip}-group--PaddingLeft);
+  padding-inline-end: var(--#{$chip}-group--PaddingRight);
 
   &.pf-m-category {
     --#{$chip}-group--PaddingTop: var(--#{$chip}-group--m-category--PaddingTop);
@@ -93,6 +93,6 @@
 .#{$chip}-group__close {
   display: flex;
   align-self: flex-start;
-  margin-top: var(--#{$chip}-group__close--MarginTop);
-  margin-bottom: var(--#{$chip}-group__close--MarginBottom);
+  margin-block-start: var(--#{$chip}-group__close--MarginTop);
+  margin-block-end: var(--#{$chip}-group__close--MarginBottom);
 }

package/components/Chip/chip.css

@@ -28,6 +28,7 @@
   --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-chip__text--MaxWidth: 16ch;
+  --pf-v5-c-chip__c-badge--MarginLeft: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
   --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -43,17 +44,20 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding: var(--pf-v5-c-chip--PaddingTop) var(--pf-v5-c-chip--PaddingRight) var(--pf-v5-c-chip--PaddingBottom) var(--pf-v5-c-chip--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-chip--PaddingTop);
+  padding-block-end: var(--pf-v5-c-chip--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-chip--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-chip--PaddingRight);
   list-style: none;
   background-color: var(--pf-v5-c-chip--BackgroundColor);
   border-radius: var(--pf-v5-c-chip--BorderRadius);
 }
 .pf-v5-c-chip::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-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
   border-radius: var(--pf-v5-c-chip--before--BorderRadius);
@@ -80,10 +84,13 @@
   max-width: var(--pf-v5-c-chip__text--MaxWidth);
   color: var(--pf-v5-c-chip__text--Color);
 }
+.pf-v5-c-chip__text .pf-v5-c-badge {
+  margin-inline-start: var(--pf-v5-c-chip__c-badge--MarginLeft);
+}
 
 .pf-v5-c-chip__icon + .pf-v5-c-chip__text,
 .pf-v5-c-chip__text + .pf-v5-c-chip__icon {
-  margin-left: var(--pf-v5-c-chip__icon--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-chip__icon--MarginLeft);
 }
 
 .pf-v5-c-chip__content {
@@ -102,9 +109,9 @@
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
   --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
-  margin-top: var(--pf-v5-c-chip__actions--c-button--MarginTop);
-  margin-right: var(--pf-v5-c-chip__actions--c-button--MarginRight);
-  margin-bottom: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
+  margin-block-start: var(--pf-v5-c-chip__actions--c-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
+  margin-inline-end: var(--pf-v5-c-chip__actions--c-button--MarginRight);
   line-height: 1;
 }
 

package/components/Chip/chip.scss

@@ -26,6 +26,7 @@
   // chip text
   --#{$chip}__text--Color: var(--#{$pf-global}--Color--100);
   --#{$chip}__text--MaxWidth: 16ch;
+  --#{$chip}__c-badge--MarginLeft: var(--#{$pf-global}--spacer--xs);
 
   // chip actions
   --#{$chip}__actions--FontSize: var(--#{$pf-global}--FontSize--xs);
@@ -49,17 +50,20 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding: var(--#{$chip}--PaddingTop) var(--#{$chip}--PaddingRight) var(--#{$chip}--PaddingBottom) var(--#{$chip}--PaddingLeft);
+  padding-block-start: var(--#{$chip}--PaddingTop);
+  padding-block-end: var(--#{$chip}--PaddingBottom);
+  padding-inline-start: var(--#{$chip}--PaddingLeft);
+  padding-inline-end: var(--#{$chip}--PaddingRight);
   list-style: none;
   background-color: var(--#{$chip}--BackgroundColor);
   border-radius: var(--#{$chip}--BorderRadius);
 
   &::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(--#{$chip}--before--BorderWidth) solid var(--#{$chip}--before--BorderColor);
     border-radius: var(--#{$chip}--before--BorderRadius);
@@ -92,11 +96,15 @@
   position: relative;
   max-width: var(--#{$chip}__text--MaxWidth);
   color: var(--#{$chip}__text--Color);
+
+  .#{$badge} {
+    margin-inline-start: var(--#{$chip}__c-badge--MarginLeft); // remove in breaking change
+  }
 }
 
 .#{$chip}__icon + .#{$chip}__text,
 .#{$chip}__text + .#{$chip}__icon {
-  margin-left: var(--#{$chip}__icon--MarginLeft);
+  margin-inline-start: var(--#{$chip}__icon--MarginLeft);
 }
 
 .#{$chip}__content {
@@ -117,9 +125,9 @@
     --#{$button}--PaddingLeft: var(--#{$chip}__actions--c-button--PaddingLeft);
     --#{$button}--FontSize: var(--#{$chip}__actions--c-button--FontSize);
 
-    margin-top: var(--#{$chip}__actions--c-button--MarginTop);
-    margin-right: var(--#{$chip}__actions--c-button--MarginRight);
-    margin-bottom: var(--#{$chip}__actions--c-button--MarginBottom);
+    margin-block-start: var(--#{$chip}__actions--c-button--MarginTop);
+    margin-block-end: var(--#{$chip}__actions--c-button--MarginBottom);
+    margin-inline-end: var(--#{$chip}__actions--c-button--MarginRight);
     line-height: 1;
   }
 }