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

package/css/components/Breadcrumb/breadcrumb.css

@@ -36,15 +36,18 @@
   list-style: none;
 }
 .pf-v5-c-breadcrumb__item:not(:last-child) {
-  margin-right: var(--pf-v5-c-breadcrumb__item--MarginRight);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
 }
 
 .pf-v5-c-breadcrumb__item-divider {
-  margin-right: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
   font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;
@@ -71,7 +74,10 @@ button.pf-v5-c-breadcrumb__link {
 }
 
 .pf-v5-c-breadcrumb__dropdown {
-  margin: var(--pf-v5-c-breadcrumb__dropdown--MarginTop) var(--pf-v5-c-breadcrumb__dropdown--MarginRight) var(--pf-v5-c-breadcrumb__dropdown--MarginBottom) var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
+  margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
+  margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
 }
 .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
   line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);

package/css/components/Breadcrumb/breadcrumb.d.ts

@@ -7,9 +7,11 @@ declare const _default: {
   "breadcrumbItemDivider": "pf-v5-c-breadcrumb__item-divider",
   "breadcrumbLink": "pf-v5-c-breadcrumb__link",
   "breadcrumbList": "pf-v5-c-breadcrumb__list",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Breadcrumb/breadcrumb.js

@@ -9,8 +9,10 @@ exports.default = {
   "breadcrumbItemDivider": "pf-v5-c-breadcrumb__item-divider",
   "breadcrumbLink": "pf-v5-c-breadcrumb__link",
   "breadcrumbList": "pf-v5-c-breadcrumb__list",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Breadcrumb/breadcrumb.mjs

@@ -7,8 +7,10 @@ export default {
   "breadcrumbItemDivider": "pf-v5-c-breadcrumb__item-divider",
   "breadcrumbLink": "pf-v5-c-breadcrumb__link",
   "breadcrumbList": "pf-v5-c-breadcrumb__list",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  }
+  },
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Button/button.css

@@ -170,7 +170,10 @@
   --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
   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);
@@ -182,10 +185,10 @@
 }
 .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;
@@ -297,8 +300,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 +400,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 +408,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 +416,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 +424,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);
@@ -480,16 +486,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));
 }
@@ -500,7 +506,7 @@
 .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);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-button {
@@ -545,5 +551,5 @@
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
   border: 0;
-  border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
+  border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
 }

package/css/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(.ws-dir-rtl, .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/css/components/CalendarMonth/calendar-month.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
   "calendarMonthHeaderMonth": "pf-v5-c-calendar-month__header-month",
   "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
   "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "prevMonth": "pf-m-prev-month",
     "nextMonth": "pf-m-next-month",
@@ -24,6 +25,7 @@ declare const _default: {
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/CalendarMonth/calendar-month.js

@@ -13,6 +13,7 @@ exports.default = {
   "calendarMonthHeaderMonth": "pf-v5-c-calendar-month__header-month",
   "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
   "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "prevMonth": "pf-m-prev-month",
     "nextMonth": "pf-m-next-month",
@@ -26,5 +27,6 @@ exports.default = {
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/CalendarMonth/calendar-month.mjs

@@ -11,6 +11,7 @@ export default {
   "calendarMonthHeaderMonth": "pf-v5-c-calendar-month__header-month",
   "calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
   "calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "prevMonth": "pf-m-prev-month",
     "nextMonth": "pf-m-next-month",
@@ -24,5 +25,6 @@ export default {
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Card/card.css

@@ -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,7 +260,10 @@
 
 .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 {
@@ -281,8 +284,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 +351,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 +385,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/css/components/Check/check.css

@@ -38,7 +38,7 @@
 
 .pf-v5-c-check__body {
   grid-column: 2;
-  margin-top: var(--pf-v5-c-check__body--MarginTop);
+  margin-block-start: var(--pf-v5-c-check__body--MarginTop);
 }
 
 .pf-v5-c-check__input {
@@ -63,7 +63,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/css/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/css/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/css/components/Chip/chip.d.ts

@@ -1,5 +1,6 @@
 import './chip.css';
 declare const _default: {
+  "badge": "pf-v5-c-badge",
   "button": "pf-v5-c-button",
   "chip": "pf-v5-c-chip",
   "chipActions": "pf-v5-c-chip__actions",

package/css/components/Chip/chip.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./chip.css');
 exports.default = {
+  "badge": "pf-v5-c-badge",
   "button": "pf-v5-c-button",
   "chip": "pf-v5-c-chip",
   "chipActions": "pf-v5-c-chip__actions",

package/css/components/Chip/chip.mjs

@@ -1,5 +1,6 @@
 import './chip.css';
 export default {
+  "badge": "pf-v5-c-badge",
   "button": "pf-v5-c-button",
   "chip": "pf-v5-c-chip",
   "chipActions": "pf-v5-c-chip__actions",

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -30,9 +30,9 @@
 }
 .pf-v5-c-clipboard-copy.pf-m-inline {
   display: inline;
-  padding-top: var(--pf-v5-c-clipboard-copy--m-inline--PaddingTop);
-  padding-bottom: var(--pf-v5-c-clipboard-copy--m-inline--PaddingBottom);
-  padding-left: var(--pf-v5-c-clipboard-copy--m-inline--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-clipboard-copy--m-inline--PaddingTop);
+  padding-block-end: var(--pf-v5-c-clipboard-copy--m-inline--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-clipboard-copy--m-inline--PaddingLeft);
   white-space: nowrap;
   background-color: var(--pf-v5-c-clipboard-copy--m-inline--BackgroundColor);
 }
@@ -44,20 +44,29 @@
   display: flex;
 }
 .pf-v5-c-clipboard-copy__group > * + * {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 
 .pf-v5-c-clipboard-copy__toggle-icon {
   transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-clipboard-copy__expandable-content {
-  padding: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight);
   word-wrap: break-word;
   background-color: var(--pf-v5-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--pf-v5-c-clipboard-copy__expandable-content--BorderColor);
-  border-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth);
   box-shadow: var(--pf-v5-c-clipboard-copy__expandable-content--BoxShadow);
 }
 .pf-v5-c-clipboard-copy__expandable-content pre {
@@ -78,8 +87,8 @@
 }
 
 .pf-v5-c-clipboard-copy__actions-item {
-  margin-top: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop));
-  margin-bottom: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom));
+  margin-block-start: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop));
+  margin-block-end: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom));
 }
 .pf-v5-c-clipboard-copy__actions-item .pf-v5-c-button {
   --pf-v5-c-button--PaddingTop: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop);
@@ -92,8 +101,8 @@
   --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
-  margin-left: 0;
-  border-left: 1px solid var(--pf-v5-global--palette--black-700) !important;
+  margin-inline-start: 0;
+  border-inline-start: 1px solid var(--pf-v5-global--palette--black-700) !important;
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
   border: 0;

package/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -8,12 +8,14 @@ declare const _default: {
   "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
   "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
   "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/ClipboardCopy/clipboard-copy.js

@@ -10,11 +10,13 @@ exports.default = {
   "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
   "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
   "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -8,11 +8,13 @@ export default {
   "clipboardCopyGroup": "pf-v5-c-clipboard-copy__group",
   "clipboardCopyText": "pf-v5-c-clipboard-copy__text",
   "clipboardCopyToggleIcon": "pf-v5-c-clipboard-copy__toggle-icon",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };